1.css in js 介绍
CSS-IN-JS 是 WEB 项目中将 CSS 代码捆绑在 JS 代码中的解决方案，这种方案旨在解决 CSS 的局限性，例如缺乏动态功能，作用域和可移植性
CSS-IN-JS 方案的优点：
- 让CSS代码拥有独立的作用域，阻止CSS代码泄露到组件外部，防止样式冲突
- 让组件更具可移植性，实现开箱即用，轻松创建松耦合的应用程序
- 让组件更具可重用性，只需编写一次即可，可以在任何地方运行，不仅可以在同一应用程序中重用组件，而且可以在使用相同框架构建的其他应用程序中重用组件
- 让样式具有动态功能，可以将复杂的逻辑应用于样式规则，如果要创建需要动态功能的复杂UI,它是理想的解决方案
缺点：
- 为项目增加了额外的复杂性
- 自动生成的选择器大大降低了代码的可读性
2.Emotion 库
2.1 介绍
Emotion 是一个旨在使用 JS 编写 CSS 样式的库
npm install @emotion/core @emotion/styled
2.2 css 属性支持
- JSX Pragma
通知 babel , 不再需要将 jsx 语法转换为 React.createElement 方法， 而是需要转换为 jsx 方法：
/** @jsx jsx */
import { jsx } from '@emotion/core'
- Babel Preset（更推荐）
npm run eject
npm install @emotion/babel-preset-css-prop
在 package.json 文件中找到 babel 属性，加入如下内容：
"presets": [
"react-app",
"@emotion/babel-preset-css-prop"
]
使用：
function App() {
return <div css={{width: 200, height: 200, background: "pink"}}>App works</div>;
}
2.3 css方法
1.String Styles
2.Object Styles
2.4 css属性的优先级
props 对象中的 css 属性优先级⾼于组件内部的 css 属性
在调⽤组件时可以在覆盖组件默认样式
2.5 Styled Components 样式化组件
样式化组件就是⽤来构建⽤户界⾯的，是 emotion 库提供的另⼀种为元素添加样式的⽅式
1.创建样式化组件
String Styles：
Object Styles：
示例：
2.根据props属性覆盖样式
String Styles：
Object Styles：
第一个默认样式，第二个传递的样式
示例：
3.为任何组件添加样式
String Styles：
Object Styles：
示例：
4.通过⽗组件设置子组件样式
String Styles：
Object Styles：
示例：
5.嵌套选择器 &
& 表示组件本身：
示例：
6.as属性
要使⽤组件中的样式, 但要更改呈现的元素, 可以使⽤ as 属性：
示例：
2.6 样式组合
在样式组合中，后调⽤的样式优先级⾼于先调⽤的样式
2.7 全局样式
2.8 关键帧动画
2.9 主题
1.下载主题模块
npm install emotion-theming
