Javascript 模板文字中有多个求值。。。如何改进样式化组件的填充计算？

我正在尝试使用样式化组件来设置按钮的样式，并添加一些填充，如下所示。有没有一种更干净的方法可以使用一个表达式返回两个值，这样我就可以清理这个问题了

export const Button = styled.button`
  padding: ${props => (props.primary ? rhythm(0.65) : rhythm(0.5))} ${props => (props.primary ? rhythm(1.6) : rhythm(1))};
`

另外，Prettier将前面的代码格式化如下。这是无效的css，因此不起作用。这是prettier中的错误还是我的代码太糟糕了

破碎的：

export const Button = styled.button`
  padding: ${props => (props.primary ? rhythm(0.65) : rhythm(0.5))}
    ${props => (props.primary ? rhythm(1.6) : rhythm(1))};
`

---

可以使用一个模板字符串生成这两个值。创建一个生成字符串的简单函数更具可读性：

const节奏=v=>`${v}em`；//嘲弄
const getPadding=（a，b）=>`${节奏（a）}${节奏（b）}`
const Button=styled.Button`
padding:${props=>（props.primary？getPadding（0.65,1.6）：getPadding（0.5,1））；
`
ReactDOM.render(
主要的，重要的
非主要
,
根
);