样式组件/情感.js对象样式或模板样式是否优于其他样式?

Question

我喜欢对象风格的清洁

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

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

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

在 StyledComponent 或 Emotional 中，css-string(模板(样式是否比对象样式更受欢迎(或更受支持.js？

• 编辑

对于一个区别，我知道我认为不可能用对象样式做到这一点

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

Answer 1

标记模板文字的使用量远远超过对象，因为后者是在 v3.4 中引入的。此时，Styled组件已经非常突出。

除了外观之外，没有已知的区别。我个人更喜欢模板文字，因为如果您使用 IDE 插件(例如 vscode 样式的组件(，它会给人一种实际 CSS 的触感和感觉

编辑

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

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
);

沙盒化