CSS-IN-JS

集成 CSS 代码在 JavaScript ⽂件

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.createElement ⽅法, ⽽是需要转换为 jsx ⽅法.<