如何在 antd/Ant Design 中将 className 传递给表的标题? [英] How can I pass a className to the Header of a Table in antd / Ant Design?

问题描述

使用 Ant Design Table，我可以使用 rowClassName 属性将 className 传递给任意行:

With an Ant Design Table, I can pass a className to an arbitrary row using the rowClassName prop:

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

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

Is there any way to do this with the Header?

推荐答案

CSS 在表格样式方面似乎相当棘手，antd Table 是用常规 HTML 表格构建的(带有顶部的逻辑糖).不可能使用 antd 将 className 传递给表的标题，但如果可以的话，这似乎也不是最有用的.

It seems that CSS is quite tricky when it comes to styling tables, and the antd Table is built with regular HTML tables (with logical sugar on top). It isn't possible to pass a className to the header of a table with antd, but it also seems like that wouldn't be the most useful if we could.

相反，解决方案是将 className 作为一个整体传递给 Table，并使用如下 CSS 来设置标题的样式.

Instead, the solution is to pass the className to the Table as a whole, and have CSS as follows in order to style the 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}
    />
);

注意:如果你想要一个围绕标题行的边框，你只需要 borderCollapse: 'collapse'.

这篇关于如何在 antd/Ant Design 中将 className 传递给表的标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！