css样式穿透

在 Ant Design 中，Table 组件提供了一些属性和样式可以用来定制表格的外观，包括表头和每一行的背景色，以及每一列的样式。以下是一些常用的属性和样式：

1. 表头背景色和每一行的背景色：

• 使用 columns 属性设置每一列的配置，其中可以包含 title 属性用于设置列标题。
• 使用 rowClassName 属性设置每一行的样式。

import { Table } from 'antd';

const columns = [
  {
    title: 'Column 1',
    dataIndex: 'column1',
    key: 'column1',
  },
  {
    title: 'Column 2',
    dataIndex: 'column2',
    key: 'column2',
  },
  // Add more columns as needed
];

const data = [
  {
    key: '1',
    column1: 'Data 1',
    column2: 'Data 2',
  },
  {
    key: '2',
    column1: 'Data 3',
    column2: 'Data 4',
  },
  // Add more data as needed
];

const MyTable = () => (
  <Table
    columns={columns}
    dataSource={data}
    rowClassName={(record, index) => index % 2 === 0 ? 'even-row' : 'odd-row'}
    // You can also use rowClassName to conditionally set styles based on the data
  />
);

在上面的例子中，rowClassName 根据行的索引设置奇偶行的样式，你可以根据需要自定义行的样式。

2. 表头背景色：

你可以通过 CSS 来自定义表头的样式，例如：

.ant-table-thead > tr > th { background-color: #e6f7ff; /* 设置表头背景色 */ }

你可以通过 CSS 来自定义每一列的样式，例如：

.ant-table-cell { padding: 10px; /* 设置每一列的 padding */ }

4. 样式穿透

:global(.ant-table-thead > tr > th) {
  background-color: #e6f7ff; /* 设置表头背景色 */
}

5. 使用 BEM 命名规范：

BEM（Block Element Modifier）是一种命名规范，用于创建可维护和可扩展的样式。你可以在你的组件上应用 BEM 类名，并使用这些类名来覆盖 Ant Design 的样式。

import { Table } from 'antd';
import './MyTable.css'; // 引入自定义样式文件

const MyTable = () => (
  <Table
    columns={columns}
    dataSource={data}
    className="my-custom-table" // 添加自定义类名
  />
);

/* 使用 BEM 类名 */
.my-custom-table .ant-table-thead > tr > th {
  background-color: #e6f7ff; /* 设置表头背景色 */
}

.my-custom-table .ant-table-cell {
  padding: 10px; /* 设置每一列的 padding */
}