1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 怎么修改react的antd默认样式

怎么修改react的antd默认样式

时间:2023-04-03 04:28:48

相关推荐

怎么修改react的antd默认样式

web前端|js教程

react,默认样式

web前端-js教程

电商源码java,ubuntu系统打开不,tomcat用不用重新配置,电脑爬虫就业方向,php特殊值的布尔值,黑河seo优化lzw

react中修改antd默认样式的方法:

云服务器搭建视频网站源码,vscode 无法响应,程序自动启动ubuntu,tomcat无法打开,sqlite db加密,插件有几种类型,前端框架产生的原因,爬虫数据投毒,php的缓存,夫唯 seo,asp 网站广告管理系统,易语言怎么点击网页广告,php开源免费网站模板,css页面左右滑动,论坛管理系统,题库考试小程序源码lzw

最近在做react+antd项目。不可避免的遇到了修改antd默认样式的问题。

微信派单源码,vscode中的图标插件,ubuntu测试php,如何设置tomcat参数,爬虫咬人吗,php pdo函数,潍坊服务好的seo效果,书法培训学校网站源码,如何将discuz模板网站打包下载lzw

比如,table组件的表头背景色设置,如果直接使用元素样式,会修改整个项目的table。这里我用的方法是,给table添加一个div父元素,给他设置个className,然后设置这个样式内的table表头样式。

我使用的.less预编译。

.boxW,.normalB { :global { .ant-table-thead > tr > th, .ant-table-tbody > tr > td { padding: 8px 8px !important; } .ant-table-thead > tr > th { background-color: rgb(192, 244, 248); } .ant-table-thead > tr > th:hover { background-color: rgb(192, 244, 248); } .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover { background: rgb(192, 244, 248); } }}

这样就可以只修改到当前文件里table的样式了。

这里顺便记录一下.less的样式继承,通过(&:extend(被继承class名))。

.boxW { min-width: 1150px;}.normalB { &:extend(.boxW); &:extend(.boxBorder);}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。