下面这篇文章，我们来介绍一下，react中支持的样式写法
内联样式
内联样式是官方推荐的一种css样式的写法：
- style 接受一个采用小驼峰命名属性的 JavaScript 对象，，而不是 CSS 字符串。
- 并且可以引用state，props中的状态来设置相关的样式。 内联样式的优点:
- 内联样式, 样式之间不会有冲突
- 可以动态获取当前state,props中的状态 内联样式的缺点：
- 写法上都需要使用驼峰标识
- 某些样式没有提示
- 大量的样式, 代码混乱
- 某些样式无法编写(比如伪类/伪元素) 所以官方依然是希望内联合适和普通的css来结合编写。
普通的css
普通的css我们通常会编写到一个单独的文件，之后再进行引入。这样的编写方式和普通的网页开发中编写方式是一致的。
如果我们按照普通的网页标准去编写，那么也不会有太大的问题。但是组件化开发中我们总是希望组件是一个独立的模块，即便是样式也只是在自己内部生效，不会相互影响。但是普通的css都属于全局的css，样式之间会相互影响。这种编写方式最大的问题是样式之间会相互层叠掉。
css modules
css modules并不是React特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用的。但是，如果在其他项目中使用个，那么我们需要自己来进行配置，比如配置webpack.config.js中的modules: true等。
React的脚手架已经内置了css modules的配置：
.css, .less, .scss等样式文件都修改成.module.css, .module.less, .module.scss等。之后就可以引用并进行使用。通过模块.class即可。 css modules确实解决了局部作用域的问题，也是很多人喜欢在React中使用的一种方案。
// about/index.js import React, { PureComponent } from 'react' import style from './style.module.css' export default class About extends PureComponent { render() { return ( <div id={style.styleColor} className={style.font}> About </div> ) } }
// about/style.module.css #styleColor { color: blue; } .font { font-size: 50px; }
// home/index.js import React, { PureComponent } from 'react' import style from './style.module.css' export default class Home extends PureComponent { render() { return ( <div id={style.styleColor} className={style.font}> Home </div> ) } }
// home/style.module.css #styleColor { color: red; } .font { font-size: 30px; }
但是这种方案也有自己的缺陷：
- 引用的类名，不能使用连接符(.home-title)，在JavaScript中是不识别的。
- 所有的className都必须使用{style.className} 的形式来编写。
- 不方便动态来修改某些样式，依然需要使用内联样式的方式。
css in js
CSS-in-JS 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义。注意此功能并不是 React 的一部分，而是由第三方库提供。 React 对样式如何定义并没有明确态度。
事实上CSS-in-JS的模式就是一种将样式（CSS）也写入到JavaScript中的方式，并且可以方便的使用JavaScript的状态。
当然，这种开发的方式也受到了很多的批评：hackernoon.com/stop-using-…
目前比较流行的CSS-in-JS的库有哪些呢？
- styled-components
- emotion
- glamorous 目前可以说styled-components依然是社区最流行的CSS-in-JS库，所以下面介绍一下styled-components。
就我个人而言css-modules更适合我，可能css in js没有使用过。但是对于方便程度，依旧是css in js更方便。使用什么就看没有人的习惯了。
antd修改主题
配置路径别名
依旧需要合并webpack配置，所以我们还是需要看## antd修改主题，然后再craco.config.js中设置webpack配置。
或者直接执行npm run eject调出webpack.config.js文件。
const {resolve} = require("path") module.exports = { webpack: { alias: { "@": resolve(__dirname, "src"), "components": resolve(__dirname, "src/components"), "assets": resolve(__dirname, "src/assets") } } };
