如何自定义Ant Design Table与Pagination组件样式？

下面针对你的三个需求，整理几种实用的实现方案：

1. 自定义 className + 本地 CSS/SCSS 覆盖（最常用） #

给组件添加自定义类名，通过 CSS 精准覆盖 Ant Design 的默认样式，不会影响其他组件。

代码示例 #

import { Table, Pagination } from 'antd';
import './CustomTableStyles.css';

const columns = [
  { title: '姓名', dataIndex: 'name', width: 150 }, // 直接配置列宽
  { title: '年龄', dataIndex: 'age', width: 100 },
  { title: '地址', dataIndex: 'address' },
];

const data = [
  { key: '1', name: '张三', age: 28, address: '北京' },
  { key: '2', name: '李四', age: 32, address: '上海' },
];

export default function CustomStyledComponents() {
  return (
    <div>
      <Table
        className="custom-table"
        columns={columns}
        dataSource={data}
        pagination={false} // 单独拆分分页组件
      />
      <Pagination className="custom-pagination" defaultCurrent={1} total={50} />
    </div>
  );
}

对应的 CSS 文件（CustomTableStyles.css） #

/* 1. 设置表头为绿色 */
.custom-table .ant-table-thead > tr > th {
  background-color: #52c41a !important;
  color: #ffffff;
}

/* 2. 自定义行高、列宽、背景色 */
.custom-table .ant-table-tbody > tr > td {
  height: 60px;
  background-color: #f6ffed;
}

/* 可选：行 hover 状态样式 */
.custom-table .ant-table-tbody > tr:hover > td {
  background-color: #e6ffed;
}

/* 3. 设置分页页码背景色为绿色 */
.custom-pagination .ant-pagination-item-active {
  background-color: #52c41a !important;
  border-color: #52c41a !important;
}

.custom-pagination .ant-pagination-item-active a {
  color: #ffffff;
}

/* 可选：页码 hover 状态边框色 */
.custom-pagination .ant-pagination-item:hover {
  border-color: #52c41a;
}

2. 内联样式配置（适合局部简单定制） #

利用 Ant Design 组件提供的内置属性，直接给表头、行、单元格设置内联样式。

代码示例 #

import { Table, Pagination } from 'antd';

const columns = [
  { 
    title: '姓名', 
    dataIndex: 'name', 
    width: 150,
    // 表头单元格样式
    headerCellStyle: { backgroundColor: '#52c41a', color: '#fff' },
    // 数据单元格样式
    cellStyle: { height: 60, backgroundColor: '#f6ffed' }
  },
  { 
    title: '年龄', 
    dataIndex: 'age', 
    width: 100,
    headerCellStyle: { backgroundColor: '#52c41a', color: '#fff' },
    cellStyle: { height: 60, backgroundColor: '#f6ffed' }
  },
];

export default function InlineStyleDemo() {
  return (
    <div>
      <Table
        columns={columns}
        dataSource={data}
        rowStyle={{ height: 60 }} // 统一设置行高
        pagination={{
          className: 'custom-pagination', // 分页还是需要类名配合CSS覆盖页码样式
          defaultCurrent: 1,
          total: 50
        }}
      />
    </div>
  );
}

3. CSS-in-JS（如 styled-components） #

通过 styled-components 等 CSS-in-JS 工具包装 Ant Design 组件，实现组件级样式隔离。

代码示例 #

import styled from 'styled-components';
import { Table, Pagination } from 'antd';

// 定制 Table 组件
const StyledTable = styled(Table)`
  .ant-table-thead > tr > th {
    background-color: #52c41a;
    color: #fff;
  }
  
  .ant-table-tbody > tr > td {
    height: 60px;
    background-color: #f6ffed;
  }
`;

// 定制 Pagination 组件
const StyledPagination = styled(Pagination)`
  .ant-pagination-item-active {
    background-color: #52c41a;
    border-color: #52c41a;
    
    a {
      color: #fff;
    }
  }
  
  .ant-pagination-item:hover {
    border-color: #52c41a;
  }
`;

export default function StyledComponentDemo() {
  return (
    <div>
      <StyledTable columns={columns} dataSource={data} pagination={false} />
      <StyledPagination defaultCurrent={1} total={50} />
    </div>
  );
}

4. 全局样式覆盖（不推荐，影响范围广） #

如果需要全局统一修改所有 Table 和 Pagination 的样式，可以直接在全局 CSS 文件中覆盖默认类，但会影响项目中所有使用该组件的地方，仅适合全局统一风格的场景。

/* 全局表头绿色 */
.ant-table-thead > tr > th {
  background-color: #52c41a;
  color: #fff;
}

/* 全局表格行样式 */
.ant-table-tbody > tr > td {
  height: 60px;
  background-color: #f6ffed;
}

/* 全局分页激活态样式 */
.ant-pagination-item-active {
  background-color: #52c41a;
  border-color: #52c41a;
}

.ant-pagination-item-active a {
  color: #fff;
}

内容的提问来源于stack exchange，提问作者opu