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

Question

用js编写内联样式，

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

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

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

使用“样式化组件”编写样式，

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 bette此外，内联样式被认为是不好的做法，因为很难重用和维护样式。

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. 内联样式的功能有限(尝试以内联样式制作动画，甚至实现媒体查询)。