antd Table 設置 header 和 row 的背景色

1 週前

設置 components.header.cell 和 components.body.cell 覆蓋 cell

然後 table header 跟 row 都會有預設的灰色底線，不想要的話直接設置 borderBottomWidth 為 0 就好

import { Button, Table } from 'antd'
//...
export const Component = ({ columns, data ) => {
  return (
    <Table
      columns={columns}
      dataSource={data}
      components={{
        header: {
          cell: ({ children, ...props }) => (
            <th
              {...props}
              style={{
                backgroundColor: '#fff',
                borderBottomWidth: 0,
              }}
            >
              {children}
            </th>
          ),
        },
        body: {
          cell: ({ children, ...props }) => (
            <td
              {...props}
              style={{
                backgroundColor: '#fff',
                borderBottomWidth: 0,
              }}
            >
              {children}
            </td>
          ),
        },
      }}
    />
  )
}

相關文章