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

问题描述

使用Ant设计表，我可以使用 rowClassName 属性将className传递到任意行:

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

rowClassName = {(记录，索引)=>索引=== 0&&'headerClassName'}

是否可以使用Header进行此操作?

Is there any way to do this with the Header?

推荐答案

在样式表方面，CSS似乎很棘手，而 antd Table 是用常规HTML表(带有逻辑糖).不可能将 className 传递给具有 antd 的表的标题，但是如果可以的话，这似乎并不是最有用的.

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屋！