如何在 antd / Ant Design 中将类名传递到表头？

Question

使用 Ant 设计表，我可以使用

rowClassName

属性将类名传递到任意行：

rowClassName={(record, index) => index === 0 && 'headerClassName'}

有没有办法用标题来做到这一点？

Answer 1

对于对象列数组内的标题键，将字符串更改为反应节点..

我们可以使用这种方式对标题文本进行自定义样式，但这并不能完全解决问题，

只是一个样本

columns = [
    { title: <div style={{ background: "#01bcd4"  }}>Full Name:</div>, width: 100, dataIndex: 'name', key: 'name', fixed: 'left'},
      { title: <div style={{ background: "#01bcd4" }}>Presets:</div>, width: 100, dataIndex: 'age', key: 'age', fixed: 'left' }]

Answer 2

CSS 在设计表格时似乎相当棘手，而

antd Table

是用常规 HTML 表格构建的（顶部有逻辑糖）。不可能使用

className

将

antd

传递到表格的标题，但如果可以的话，这似乎也不是最有用的。

相反，解决方案是将

className

作为一个整体传递给

Table

，并使用如下 CSS 来设置标题样式。

import React from 'react';
import { Table } from 'antd';
import { css } from 'react-emotion';

const tableCSS = css({
  margin: '40px 120px',
  backgroundColor: 'white',
  '& table': {
    borderCollapse: 'collapse'
  },
  '& thead > tr > th': {
    backgroundColor: 'darkblue',
    color: 'white',
  },
  '& thead > tr': {
    borderWidth: '2px',
    borderColor: 'yellow',
    borderStyle: 'solid'
  }
});

const StyledTable = ({ data, columns }) => (
    <Table
      className={tableCSS}
      dataSource={data}
      columns={columns}
    />
);

注意：如果您想要标题行周围有边框，则只需要

borderCollapse: 'collapse'

。

Answer 3

这里晚了，但您可以在

th

上定义 className，如下所示。确保 className 位于列表顶部附近，否则在应用 className 之前列已经被渲染。

const COLUMNS = [
  {
    title: "ID",
    className: "id",
    dataIndex: "id",
    dataType: "string",
    key: "id",
    searchable: true,
    sorter: makeValueSorter("id"),
  }, ...