在 antd / Ant Design 中如何将 className 传递给 Table 的 Header？

Question

使用 Ant Design Table，我可以使用 rowClassName 属性将类名传递给任意行：

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

有什么方法可以用 Header 做到这一点吗？

Answer 1

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

我们可以使用这种方式为 header 文本自定义样式，但它不能完全解决问题，

只是一个例子

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 在样式 table 方面相当棘手，而 antd Table 是使用常规 HTML table 构建的（上面有逻辑糖）。不可能将 className 传递给 table 和 antd 的 header，但如果我们可以的话，这似乎也不是最有用的.

相反，解决方案是将 className 作为一个整体传递给 Table，并按如下方式设置 CSS 以设置 header 的样式。

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}
    />
);

注意：如果您想要 header 行周围的边框，则只需要 borderCollapse: 'collapse'。

在 antd / Ant Design 中如何将 className 传递给 Table 的 Header？

How can I pass a className to the Header of a Table in antd / Ant Design?

reactjs

antd