使用:global在组件内去修改antd的全局样式，为何并没有生效？

Question

我想要参考此文档使用 :gloabal 去修改antd的Button的样式：

// CustomAntdButton/index.module.css
.myButton :global(.ant-btn-primary) {
  background-color: red !important
 }


// CustomAntdButton/index.tsx
import './index.module.css'
...
<div>CustomButton
      <Button className='myButton' type="primary" shape="circle" >按钮</Button>
</div>

但是并没有任何改变：

完整代码如下：
https://codesandbox.io/s/fk7jnl

请问要如何才能在组件内自定义Antd组件的样式呢？

Answer 1

题主的之前的提问里我就指出来了，global 样式不是这样导入的。

你这样导入的只能是 local 样式，global 样式需要你显式指定出来：

- import './index.module.css'
+ import MyStyles from './index.module.css'

...

- <Button className="myButton" type="primary" shape="circle">按钮</Button>
+ <Button className={MyStyles.myButton} type="primary" shape="circle">按钮</Button>

第二你这个选择器依然写的不对：

- .myButton :global(.ant-btn-primary) {
+ .myButton:global(.ant-btn-primary) {
  # 注意没有空格，从你的 DOM 结构上看显然它俩不是父子关系、而是同一个元素
  background-color: red !important
}

---

或者还有一种改法，你就不要用 CSS Modules：

# 文件名叫 index.css，不是 index.module.css；或者你叫别的也行，只要不是 *.module.css 就可以
.myButton.ant-btn-primary { # 正常写，不需要 :global
  background-color: red !important;
}

// 改成导入 index.css 而不是 index.module.css
import './index.css'

// 这里 className 跟你现在的写法一样
return () => <Button className="myButton" type="primary" shape="circle">按钮</Button>

Answer 2

CSS Modules 用法错了，应该这样：

import style from './index.module.css';

function CustomButton() {
  return (
    <div>CustomButton
      <Button className={style.myButton} type="primary" shape="circle" >按钮</Button>
    </div>
  )
}