情感js中css和Styled的区别答案

【问题标题】：difference between css and Styled in emotion js情感js中css和Styled的区别
【发布时间】：2018-12-02 07:20:00
【问题描述】：

我开始用情感 js 学习 css-in-js。

谁能告诉我两者之间是否真的有区别

const Component = Styled('div')`
  color: 'red'
`;

和

const Component = () => (
  <div className={css`color: red`}/>
)

它的样式是某种帮助程序还是 CSS 的简写？
是否有建议何时使用？

看起来所有Styled都可以，可以用css + cx代替

【问题讨论】：

标签： emotion

【解决方案1】：

我认为主要区别在于css 只生成一个选择器一组特定的 CSS 属性，而 styled 需要一个组件来将样式附加到（即像您的示例中那样的 div）。

如果你想用 css 设置多个/不同元素的样式，你会写

const specificStyle = css`
  color: red
`
<ComponentThatRendersADiv className={specificStyle} />
<ComponentThatRendersASpan className={specificStyle} />
<ComponentThatRendersAButton className={specificStyle} />

如果您想使用styled 设置某个组件的样式并重用它：

const ComponentThatRendersADiv = styled('div')`
  color: red
`
const ComponentThatRendersASpan = ComponentThatRendersADiv.withComponent('span')
const ComponentThatRendersAButton = ComponentThatRendersADiv.withComponent('button')

<ComponentThatRendersADiv />
<ComponentThatRendersASpan />
<ComponentThatRendersAButton />

所以css 感觉更像是编写 CSS 的典型方式，您可以创建应用于元素/组件的选择器。

styled 创建一个特定的组合/组件。

styled 的文档：https://emotion.sh/docs/styled
css的文档：https://emotion.sh/docs/css

【讨论】：