问题描述
使用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传递给表的表头?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!