CSS-in-JS是什么

CSS-in-JS 是一种在 JavaScript 中编写 CSS 的方法。使用 CSS-in-JS，您可以在组件级别将样式与组件逻辑结合在一起。相比于传统的将 CSS 和 JavaScript 分开编写的方法，CSS-in-JS 提供了一些优势。

首先，CSS-in-JS 可以帮助解决 CSS 的作用域问题。使用 CSS-in-JS，每个组件都有自己的样式，不会与其他组件的样式冲突。这样做可以避免全局样式表中的命名冲突问题。

其次，CSS-in-JS 提供了更好的可重用性。您可以轻松地将组件的样式与组件本身封装在一起，使得复用组件更加容易。

另外，CSS-in-JS 还可以使用 JavaScript 的功能来动态生成样式，比如根据不同的状态或动态属性来改变样式。这使得可以动态地响应组件的状态和交互。

下面是一个使用 styled-components 库实现 CSS-in-JS 的简单示例：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=9d41438f19104dca802ef21b5942c139