在组件内使用 :global 修改 Ant Design 样式，为什么不生效？

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《在组件内使用 :global 修改 Ant Design 样式，为什么不生效？》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

在组件内使用 :global 修改 ant design 样式

你期望使用 :global 在组件内修改 ant design 的 button 样式，但未成功。以下是对你的问题的解答：

问题

:global 样式并未如预期般修改 button 的样式。如何才能在组件内自定义 ant design 组件的样式？

解答

如前文所述，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 样式的选择器也编写不正确。正确的选择器应该是：

- .mybutton :global(.ant-btn-primary) {
+ .mybutton:global(.ant-btn-primary) {
  # 注意没有空格
  background-color: red !important
}

或者，还可以通过以下方式修改样式，而不使用 css modules：

index.css

.mybutton.ant-btn-primary {
  background-color: red !important;
}

index.tsx

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

// className 写法与之前相同
return () => <Button className="myButton" type="primary" shape="circle">按钮</Button>;

今天关于《在组件内使用 :global 修改 Ant Design 样式，为什么不生效？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！