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 库和使用内联样式有什么区别。

score 2 · Accepted Answer

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

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

其次，CSS 类通常更好，而且，内联样式被认为是不好的做法，因为很难重用和维护样式。

CSS 类的性能通常比内联样式更好。

所以总而言之：

1 回答 1