js修改style样式_react项目配置antd样式配置和修改全局主题

React17.0.1项目使用antd4.7.3按需引入样式和修改全局主题

项目版本：
react 17.0.1
less 3.12.2
antd 4.7.3

一定要安装 babel-plugin-import 
yarn add less less-loader antd babel-plugin-import 
或者
npm install antd -D
npm install less-loader less babel-plugin-import -S

按照antd官方的配置不能起到相应效果，所以自己琢磨琢磨，查查资料

0. 配置webpack.config.js文件的less，修改成如下这样：

1. 修改下面这个地方，配置less-loader

3. 在这里配置全局样式， 搜preProcessor，匹配下面的代码

lessOptions: {
              modifyVars: { '@primary-color': '#1DA57A' },
              javascriptEnabled: true
            }

modifyVars:{}  这个对象里边配置详细的样式
详细具体的配置点击下面的链接很详细的配置

定制主题 - Ant Design​ant.design

4. 在plugins中配置如下(搜plugins)：

 ["import", {libraryName:"antd",style: true}],
style: true 解析less

5. 其他地方不用在配置其他样式文件，可以直接写less了，但是最好使用*.module.less,避免样式污染

focusdroid：React(或使用TS)中样式混乱解决方案 *.module.less​zhuanlan.zhihu.com

警告信息：
index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of 
Wave which is inside StrictMode. Instead, add a ref directly to the element you want to reference.
 Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

解决办法，根目录下去掉   <React.StrictMode>  </React.StrictMode>这组标签

按照antd的官网配置之后不能实现效果，不知道是不是我的姿势不对，很疑惑？之后自己琢磨和查资料实现了，没用官网的那种方法，以上请参考