如何在antd / Ant Design中將className傳遞給表的表頭？

Question

使用Ant設計表，我可以使用rowClassName將className傳遞給任意行：

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

有任何方法可以通過Header執行此操作嗎？

Answer 1

對於對象的columns數組內的標題鍵，將字符串更改為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' }]

Answer 2

在樣式表方面，CSS似乎很棘手，而antd Table是用常規HTML表（頂部是邏輯糖）構建的。 不可能使用antd將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' 。