
在组件内使用 :gl%ignore_a_1%bal 修改 ant design 样式
你期望使用 :global 在组件内修改 ant design 的 button 样式,但未成功。以下是对你的问题的解答:
问题
:global 样式并未如预期般修改 button 的样式。如何才能在组件内自定义 ant design 组件的样式?
解答
如前文所述,global 样式并非以你之前的方式导入。导入的样式是局部样式,而全局样式需要显式指定。
SciMaster
全球首个通用型科研AI智能体
156 查看详情
修改后的代码如下:
- import './index.module.css'+ import mystyles from './index.module.css'...- +
此外,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.cssimport './index.css'// className 写法与之前相同return () => ;
以上就是在组件内使用 :global 修改 Ant Design 样式,为什么不生效?的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1161219.html
微信扫一扫
支付宝扫一扫