react 中改antd中的颜色(注意: 这里使用的是css module)

1.react 中修改antd中的颜色

1.首先找到你要修改颜色的颜色例如: 例如下图: 这是一个正常的使用antd中Buttom组件， 改变这个组件的样式

//若果使用的是css module 加载的话,你在less或sass中写，你会发现不会改变颜色，即使使用!important
	.ant-btn-primary{
		color: #fff;
    	background: red !important;
    	border-color: red;
    	text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
    	-webkit-box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
    	box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
	}

原因

应为你写的样式被webpack默认打包了，换了名字了，而antd中的Button组件没有， webpack 对你写的 .antd-btn-primary 进行加载,加载完成时你的.antd-btn-primary已经给变了名字， 此时此刻你应该使用:global来防止被webpack进行重命名。

代码如下:

//jsx代码
import React from react
import { Button } from antd
import styles from ./index.module.scss
export default function index() {
  return (
    <div className={styles.antdcssTest}>
      <div className={styles.container}>
        antdcss test
        <Button type=primary>呃呃</Button>  
      </div>
    </div>
  )
}

//index.module.scss中使用 .ant-btn-primary
.antdcssTest{
  width: 100%;
  height: 100%;
  position: relative;
  .container{
    position: absolute;
    left: 50%;
    right: 50%;
    :global(.ant-btn-primary){
      color: #fff;
      background: red !important;
      border-color: red;
    }
  }
}

修改成功的图片: