antd表格样式

最新推荐文章于 2024-01-17 15:50:46 发布

原创最新推荐文章于 2024-01-17 15:50:46 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

css 同时被 2 个专栏收录

8 篇文章

订阅专栏

react

1 篇文章

订阅专栏

本文详细介绍了如何使用Ant Design框架自定义表格样式，包括实现斑马纹效果的行样式及鼠标悬停时的行背景变化。通过具体代码示例，展示了如何利用rowClassName属性设置交替的行样式，以及如何覆盖默认的鼠标悬停样式。

antd表格样式

（1）table行样式（斑马纹表格，rowClassName为表格行的类名，接收两个参数，其中index表示第几行，index不包含表头）

<Table dataSource={data} columns={columns}  rowClassName={(record, index) => (index % 2 === 0 ? styles.unOdd : styles.odd)} />

（2）表格行鼠标悬浮样式

.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td { background-color: transparent !important;}

.ant-table-body .ant-table-row-hover {background: transparent !important;}

.ant-table-body .ant-table-row-hover > td {background: transparent !important;}