如何在 antd / Ant Design 中将 className 传递给表的表头?

IT技术 reactjs antd
2022-08-04 02:09:48

rowClassName使用 Ant 设计表,我可以使用prop将 className 传递给任意行:

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

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

2个回答

对于列对象数组中的标题键,将字符串更改为react节点..

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

只是一个样本

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' }]

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

相反,解决方案是将 传递classNameTable整体,并具有如下 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'如果您想要标题行周围的边框,您只需要 。