react项目当前常用的编写样式的方式分别是行内样式、外部样式、CSS-In-JS、Atom CSS
1、行内样式
<div style={{color: red;}}>标题</div>
优点
1、样式不会和其他组件冲突
2、可以读取state
缺点
1、必须使用驼峰语法
2、样式没有代码提示
3、样式数量上升后，代码混乱
4、无法编写伪类、伪元素
2、外部样式
// a.module.css ，通过在文件名加上module可以起到限制作用域的效果，类似Vue的scoped
.title {
color: red;
}
// HelloWorld
import style from './a.module.css'
<div className={ style.title }>标题</div>
优点
1、方便维护
2、可以使用预处理scss、less
缺点
1、类名不能使用连字符
2、必须style.XXX使用
3、不能动态修改样式
3、CSS-In-JS
定义：“CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义
常见的库：
- styled-components
- emotion
- glamorous
styled-components
styled-components的本质是通过函数的调用（不使用括号，使用``），最终创建出一个组件：
-
这个组件会被自动添加上一个不重复的class；
-
styled-components会给该class添加相关的样式；
import styled from 'style-components' const Wrap = styled.div
color: red;标题
支持类似于CSS预处理器一样的样式嵌套：
- 支持直接子代选择器或后代选择器，并且直接编写样式；
- 可以通过&符号获取当前元素；
- 直接伪类选择器、伪元素等；
常用特性：
1、获取props
const Wrap = styled.div`
color: ${porps => props.color};
`
<Wrap color="red">标题</Wrap>
2、设置attrs
const Wrap = styled.div.attrs({
id: 'wrap',
'data-type': 'wrap'})`
color: red;
`
3、继承
const CusButton = styled.div`
background: #000;
`
const CusPrimaryButton = styled(CusButton)`
font-size: 20px;
`
<CusPrimaryButton>按钮</CusPrimaryButton>
4、设置主题
// App.js
import { ThemeProvider } from 'styled-components'
import HelloWorld from './components/HelloWorld'
<ThemeProvider theme={{color: 'orange'}}>
<HelloWorld></HelloWorld>
</ThemeProvider>// HelloWorld
import styled from 'styled-components'
const CusButton = styled.div` color: ${props => props.theme.color}; background: #000;`<CusButton>按钮</CusButton>
4、Atom CSS
将很多可重复使用的样式提取出来，放在一个公共的css文件中，通过类名的方式去引用样式，减少各个文件内的css代码量。
比较有名的框架 Tailwind
具体配置可以参考
在react脚手架中使用Tailwind CSS （入门）_qq_48557089的博客-CSDN博客_react tailwind
优点
1、减少各个文件内的css代码量，可以更专注业务
2、方便统一调整样式
缺点
1、学习成本高，需要理解各种含义的类名
2、复杂的样式通常需要二次封装后再使用，否则导致元素上类名过多，影响阅读
