CSS-IN-JS【集成 CSS 代码在 JavaScript 文件】

目录

1. 为什么会有 CSS-IN-JS

2、 CSS-IN-JS 介绍

3、Emotion 库 

---

1. 为什么会有 CSS-IN-JS

• CSS-IN-JS 是 WEB 项目中将 CSS 代码捆绑在 JavaScript 代码中的解决方案.
• 这种方案旨在解决 CSS 的局限性, 例如缺乏动态功能, 作用域和可移植性

2、 CSS-IN-JS 介绍

CSS-IN-JS ⽅案的优点：

1. 让 CSS 代码拥有独立的作用域, 阻止 CSS 代码泄露到组件外部, 防止样式冲突.
2.  让组件更具可移植性, 实现开箱即用, 轻松创建松耦合的应用程序
3. 让组件更具可重用性, 只需编写一次即可, 可以在任何地方运用. 不仅可以在同一应用程序中重用组件, 而且可以在使用相同框架构建的其他应用程序中重用组件.
4. 让样式具有动态功能, 可以将复杂的逻辑应用于样式规则, 如果要创建需要动态功能的复杂UI, 它是理想的解决方案

CSS-IN-JS ⽅案的缺点： 

1. 为项目增加了额外的复杂性.
2. 自动生成的选择器大大降低了代码的可读性

3、Emotion 库 

 3.1 Emotion 介绍

• Emotion 是一个旨在使用 JavaScript 编写 CSS 样式的库.
• npm install @emotion/core @emotion/styled

3.2 css 属性支持

（1）JSX Pragma

通知 babel, 不再需要将 jsx 语法转换为 React.create