在组件内使用 :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 样式，为什么不生效？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
951
收藏
