react中修改antd的默认样式

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

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

我使用的.less预编译。

              <div className={styles.boxW} ><Table columns={colType}rowKey='fxwd'pagination={false}bordereddataSource={dataType}/></div>

.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);}

转载于:https://www.cnblogs.com/thhj-IT/p/10797175.html

react中修改antd的默认样式相关推荐

图文详解placeholder属性的使用方法以及如何修改placeholder的默认样式
在页面布局时经常会用到input输入框,有时为了提示用户输入正确的信息,需要用placeholder属性加以说明.这篇文章就和大家讲讲placeholder属性怎么用以及如何修改placeholder ...
[react] react中修改prop引发的生命周期有哪几个？
[react] react中修改prop引发的生命周期有哪几个? static getDerivedStateFromPropsshouldComponentUpdaterendergetSnapsh ...
[vue-element] ElementUI怎么修改组件的默认样式？
[vue-element] ElementUI怎么修改组件的默认样式? 方法一:/deep/ 方法二:>>> 方法三:在外层添加一层div,设置自定义类名,再修改里边的样式, 格式. ...
php取消滑动条,小程序中button以及滚动条默认样式如何清除（代码）
本篇文章给大家带来的内容是关于小程序中button以及滚动条默认样式如何清除(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现如下图所示的效果,用四个button实现: 在 ...
React中使用antd的select报错Unable to preventDefault inside passive event listener invocation.
问题描述报错Unable to preventDefault inside passive event listener invocation. React中使用antd的select报错 Unab ...
react中通过Antd使用阿里图标
react中通过Antd使用iconfont阿里图标安装依赖组件中引入安装依赖 npm install --save @ant-design/icons 组件中引入 **//从antd中引入fo ...
项目中如何修改element-ui的默认样式
一.去除scoped 去掉style的scoped,用最外层盒子的class名包裹需要修改组件的class名例: <template> <el-container cla ...
html复选框不可修改,如何用【伪类】成功修改HTML checkbox默认样式？（新checkbox覆盖老checkbox无法点击的问题）...
按照一篇博客上的指导,修改checkbox默认样式: (博客地址: https://www.cnblogs.com/GumpY... ) 效果图: 按照博客,我的意图是: 1-把原checkbox 的 ...
Centos 7 中修改 Redis 的默认端口号
1.修改 Redis 的默认端口号(6379) 问题描述: Redis 的默认端口号为 6379,使用默认的端口号不是很安全,为了安全一点,需要修改默认的端口号. 查看默认的端口号: netstat ...

react中修改antd的默认样式

react中修改antd的默认样式相关推荐

最新文章

热门文章