antd中table更换颜色

Antd中的Table 表格组件提供了很多基本颜色和风格，但是如果我们想要更改或者自定义一些颜色的话，可以通过CSS 或者自定义主题来实现。

一、通过CSS自定义

我们可以通过定义一些CSS 样式类，然后通过 className 属性绑定到表格中的相应元素上来自定义表格的颜色和样式，以下为一个例子：

/* 表格Header 的自定义样式 */
.custom-header {
  background-color: #1890ff;
  color: #fff;
}

/* 表格行的自定义样式 */
.custom-row {
  background-color: #f0f2f5;
}

/* 表格奇数行自定义样式 */
.custom-row-odd {
  background-color: #fff;
}

/* 表格偶数行自定义样式 */
.custom-row-even {
  background-color: #fafafa;
}

我们可以通过 className 属性绑定到相应的表格元素上：

<Table
  columns={columns}
  dataSource={dataSource}
  rowKey="id"
  pagination={false}
  className="custom-table"
  components={{
    header: {
      cell: ResizeableTitle
    }
  }}
  onRow={(record, index) => ({
    className: index % 2 === 0 ? 'custom-row-even' : 'custom-row-odd'
  })}
  />

二、通过Antd 自定义主题

如果需要更改默认的 Antd 风格和颜色，我们可以通过覆盖 Antd 默认的 LESS 变量来达到自定义主题的目的，以下为例子：

@import "~antd/dist/antd.less";  // 导入 Antd 的 LESS 样式库

@primary-color: #1890ff;  // 更改主题颜色

@table-header-bg: #1890ff;   // 更改表格头部的背景色
@table-row-hover-bg: #f5f5f5;  // 更改表格行悬浮时的背景色

在实际开发中，我们可以根据需要来进行自定义主题的配置，然后在项目中引入自定义主题的 LESS 文件，让样式生效。

以上就是在 Antd 中更换表格颜色的两种常用方法，具体方法可以根据项目的实际需求来选择。