react antd表格样式修改

已于 2022-06-27 15:12:10 修改
阅读量1.4k 收藏 4
点赞数 1
文章标签： javascript 前端 react.js 前端框架
于 2022-06-27 15:05:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61079989/article/details/125483837
版权

react antd表格样式修改


我是直接控制台选择出标签类名强制修改的；
觉得用important加层级方案不是很好，如果有更好的方案麻烦评论指点 

/* 表头样式 */
.ant-table-thead>tr>th,
.ant-table-thead>tr {
  background: #043F4F !important;
  color: #0FDBDA !important;
  font-size: 22px;
  line-height: 0px;
  font-weight: bold !important;
  text-align: center !important;
}
/* 表头行高调整 */
.ant-table-thead>tr>th {
  line-height: 30px;
}
/* 表体背景色调整 */
.ant-table-tbody>tr>td {
  background: #043F4F;
  color: #fff;
  text-align: center;
  border-bottom: #037680 1px solid;
  font-size: 18px;
}
/* hover悬浮效果样式  选中样式 */
.ant-table-tbody>tr:hover:not(.ant-table-expanded-row)>td,
.ant-table-row-hover,
.ant-table-row-hover>td {
  background: #037680 !important;
}

.ant-table-fixed .ant-table-row-hover,
.ant-table-row-hover>td {
  background: #037680 !important;
}

.ant-table-tbody>.ant-table-row-selected>td {
  background: #037680 !important;
}

.ant-table-cell-row-hover {
  background: #037680 !important;
}

修改后效果
在这里插入图片描述

sandwich_14
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
改变选择table行的背景色
07-16
当你选中table中的某一行时，想改变这一行的背景色就可以测试此方法
2021-10-19 [可视化-问题]前端无法通过修改代码来缩小字体的字号
周飞飞的博客
10-19 2646
项目场景： 项目场景：在React项目中引用antd设置表格时，使用columns的onRow属性修改表格中单元格的格式，如下： { title: '故障名称', dataIndex: 'name', key: 'key', onCell: ((record, rowIndex)=> { // 传入两个形参，分别为行内容record与行index return { style: {
ant table修改字体
我爱美女S的博客
09-19 1590
ant table修改字体
antd-design-Table 自定义编辑表头
最新发布
日暮斜阳
04-29 878
第一步需要先安装组件在ant-design基础上开发，所以你也要安装antd。数据持久化使用的，也是要安装的。另外，react也是peer dependency。
React Ts Antd Table表格单元格背景颜色设置
qq_56547921的博客
05-16 2858
div style={changeStyle("#EEFFBB")}>,第一个div标签用于设置单元格背景颜色。changeStyle函数用于根据单元格指定参数渲染单元格的背景颜色。antd的表格定义在官方文档里有详细介绍。但官方文档中并没有针对某一个具体的单元格的背景颜色有相应的参数设置。经过实践，以下将给出antdTable单元格背景颜色设置的最简单方式.第二个div标签用于将单元格内容右移10单位，主要起美化作用。
React Table：包含 TanStack Table 更新的完整指南
分享身边生活经验blog
04-07 2246
TanStack Table 实现在许多受支持的框架中是一致的，这意味着在 React 中创建表所需的 Hooks 与在 Svelte 应用程序中创建表所用的 Hooks 相同。，TanStack Table 是 React Table 的重大进步，使该库能够支持更多的 JavaScript 框架，包括 Svelte、Solid 和 Vue。然而，与 react-data-grid 不同，react-datasheet 并未针对大型数据集进行优化，因此将其用于需要类似工作表功能的小型应用程序。
设置element的Table表头全部或单个表头颜色header-row-style
热门推荐
weixin_43923808的博客
08-15 1万+
设置element的Table表头全部或单个表头颜色header-row-style。
react-ant-dropdown-menu:下拉菜单+基于antd的菜单
03-06
React物下拉菜单下拉菜单基于antd。安装npm install -S @jswork/react-ant-dropdown-menu特性姓名类型必需的默认描述班级名称细绳错误的-- menuOptions 形状错误的--用法导入css @import " ~@jswork/react-ant-...
React Ant Design树形表格的复杂增删改操作
01-18
最近因为业务接触了antd，使用antd完成一个复杂的树形表格的显示以及修改。在这其中遇见了不少坑，很多功能antd只写了初步的功能，更为细化的功能只能自己完善。踩过的坑都写在了这里。 树形表格的显示 在antd中对于...
antd-table-react.zip
07-13
antd-table 是一个基于 React 的组件库，用于构建高质量的数据展示表格。这个压缩包 "antd-table-react.zip" 提供了一个示例，演示了如何在 antd 表格中实现首行和首列固定的效果，这对于数据量较大且需要横向和纵向...
2020一个React后台webapp项目，运用TS，antd,支持Hook，并且适配移动
06-29
`Ant Design`是一个流行的React UI框架，它提供了丰富的预设组件，如表格、按钮、表单、布局等，使得开发者能够快速构建专业且美观的前端界面。同时，Ant Design还有一套完整的主题定制方案，可以方便地调整样式以...
front-end-dash:仪表板利用react和antd
03-09
【标题】"front-end-dash:仪表板利用react和antd" 在前端开发领域，"front-end-dash"项目是一个基于React和Ant Design构建的仪表板应用。React是Facebook推出的一个用于构建用户界面的JavaScript库，它以其组件化...
react antd-design 的 table组件改变行的背景颜色以及hover时一起改变
w319502537的博客
02-23 6439
react antd-design 的 table组件改变行的背景颜色以及hover时一起改变
antd表单文字垂直居中、行距与item大小
weixin_44415764的博客
05-20 6919
一、item大小 使用size属性进行设置大小 <Input placeholder={`输入文字`} size={"large"}/> 二、垂直居中 如图：当设置item的size为large时，此时文字没有居中了 解决：因为item的大小为large了，但是文字的大小还是默认大小，所以和item大小保持一致就行 <Form layout="horizontal" onFinish={this.onFinish} onFinishFailed={this.onFi
react antd 更改table 表头和表行样式
sunyan3517的博客
10-14 6163
我这里以组件的形式来提供code 使实例正确运行至少需要以下知识： 1 创建react项目（本实例基于react项目） 2 知道如何导入和调用组件 样式效果如下图： 实现方法 目录结构： YMCollapse.css 样式文件code如下： /*行样式1*/ .oddRow{ background:LightCyan; } /*行样式2*/ .evenRow{ background:PowderBlue; } /*表头样式 ...
table后台数据渲染，不满n条时tr补全
weixin_43923202的博客
04-21 266
html: <table style="width:100%;margin-bottom:20px"> <tr style="height:30px;background-color:#f2f2f2;font-size:12px;font-weight: bold"> <th style="border:1px solid #e6e6e6;width:10%;">文件来源</th> <th style="b
React如何修改antd组件的样式
qq_64436918的博客
06-07 2622
修改antd组件库的样式可以去查看标签的类名来修改样式或者使用行内样式，遇到比较难改的也能用!import,但是当这些都不起作用后可以使用:global.我们使用的组件的样式大部分都是全局样式，使用局部方式声明经过编译后，无法与组件的默认样式匹配，样式自然就无法进行覆盖，要覆盖默认样式就需要使用全局样式。使用声明的，都不会被编译成哈希字符串也就能够进行覆盖了。 把要改的class放在global里面...
antd table设置表格一个单元格的字体颜色_React + Antd 中 BTable组件的包装与使用
weixin_39646084的博客
11-27 755
React + Antd 中 BTable组件的包装与使用在写代码的过程中，代码崽一直复制粘贴，会手酸。有时候，就会把一些过于重复、啰嗦，反复复制的代码，包装一下，省的代码太过于啰嗦。比如BTable。B表格，首先，这个表格，是从业务中抽离出来的，一个数据表格的页面，一般有啥呢？查询、双击看详情。好，那就这样做，utils里搞一些工具函数比如这个，一个表格，必然要定义一些column，列名吗，每个...
react antd 表格设置列颜色
05-23
例如，假设你有一个表格需要根据数据中的某个字段来设置每一行的颜色，你可以这样定义 `columns`： ```jsx import { Table } from 'antd'; const dataSource = [ { key: '1', name: 'John', age: 32, gender: '...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值