Styled-Component / Emotion.js 对象样式或模板样式是否优于另一个？

Question

我喜欢干净的对象风格

const Button = styled.button(
  {
    color: 'darkorchid'
  },
  props => ({
    fontSize: props.fontSize
  })
)

然而模板（？）样式似乎是支持比对象样式更多功能的主要界面

const Button = styled.button`
  color: hotpink;
`

在 StyledComponent 或 Emotion.js 中，css-字符串（模板）样式是否比对象样式更受青睐（或更多特色或受支持）？

编辑

有一个不同之处，我知道我认为使用对象样式不可能做到这一点

const dynamicStyle = props =>
  css`
    color: ${props.color};
  `

const Container = styled.div`
  ${dynamicStyle};
`

Answer 1

标记的模板文字比对象使用得更多，因为后者是在 v3.4 中引入的。这时候Styled组件已经很突出了。

除了外观之外，没有已知的区别。我个人更喜欢模板文字，因为如果您使用 IDE 插件（例如 vscode-styled-components

已编辑

这是您编辑的问题的代码：

const dynamicProps = props => css`
  background: ${props.color};
  font-size: ${props.fontSize};
`;

const SquareOne = styled.div(
  {
    width: "100px",
    height: "100px",
    background: "blue" // will be overwritten by dynamicProps
  },
  dynamicProps
);

Sandboxed

Styled-Component / Emotion.js 对象样式或模板样式是否优于另一个？

Styled-Component / Emotion.js Is object-style or template style prefered over another?

emotion

styled-components