使用内联样式和使用 css-in-js 库（如 React 中的样式化组件）之间的实际区别是什么？

Question

用js写一个内联样式，

const styles = {
    background: 'blue',
    color: 'white'
}

并在 JSX 中使用它，如下所示

<div style={styles}> I am a div </div>

使用'styled components'、

编写样式

const Div= styled.div`
     background: 'blue',
     color: 'white'
`

并像这样使用它，

<Div> I am a Div </Div>

这里使用 css-in-js 库和使用内联样式有什么区别。

Answer 1

首先，您的 styled.div 示例是错误的，因为在 CSS-in-JS 中您编写了实际的 CSS 而不是类似对象的样式：

// "Real CSS"
const Div= styled.div`
  background: blue;
  color: white;
`

其次，CSS classes are generally better，同样，内联样式被认为是不好的做法，因为很难重用和维护样式。

CSS classes are generally better for performance than inline styles.

总之：

1. 在内联样式中，您编写类对象样式与实际样式 CSS
2. 编写 CSS 可以获得 CSS 的所有好处（如选择器）。
3. 重用和维护 CSS 比内联样式容易得多。
4. 真正的争论是在 CSS-in-JS 与 CSS 模块与 SASS 与普通 CSS 之间（为此你可以 google 或阅读 SO 中的相关问题）。
5. 内联样式被认为是不良做法，因为它们会覆盖所有已定义的样式。
6. 内联样式的功能有限（尝试以内联样式制作动画，甚至实现媒体查询）。