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-string（模板）样式是否比对象样式更受青睐（或更具特色或受支持）？

• 编辑

对于一个区别，我知道我认为对象样式无法做到这一点

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