如何修改antd的样式

如图,我使用了一个antd的Button组件,默认颜色为蓝色

//global.jsx
import { Button } from 'antd';
import React from 'react';
import style from "./global.module.css"

function Global() {
  return (
    <div className={style.global}>
      <Button type="primary">点我</Button>
    </div>
  );
}

export default Global;

/*global.module.css*/
.global {
  margin: 50px auto;
  text-align: center;
}

假如我想把颜色改为红色

如果直接在局部样式中添加css,会发现没有效果,因为此时的(.ant-btn)会被转义成类似于(global_global__2Qy24)这种格式,而与按钮的class的属性名对应不上

/*global.module.css*/
.global {
  margin: 50px auto;
  text-align: center;
}

.global .ant-btn {
  background: red
}

1. 可以在全局样式中修改按钮的颜色

//global.jsx
import { Button } from 'antd';
import React from 'react';
import style from "./global.module.css"


function Global() {
  return (
    <div className={`${style.global} global`}>
  		<Button type="primary">点我</Button>
  	</div>
        );
}


export default Global;

/*index.js*/
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}


.global .ant-btn {
  background: red;
}

2. 通过css的伪类 :global来包裹antd样式名

//global.jsx
import { Button } from 'antd';
import React from 'react';
import style from "./global.module.css"


function Global() {
  return (
    <div className={style.global}>
    <Button type="primary">点我</Button>
    </div>
  );
}


export default Global;

/*global.module.css*/
.global {
  margin: 50px auto;
  text-align: center;
}


.global :global(.ant-btn) {
  background: red
}