我正在使用react
库material-ui
中的Table
组件。
由于某些原因,每行(包括标题)的顶部和底部都有一个24px
填充,我不能覆盖它。
我已经尝试更改所有底层组件的样式,但没有成功。下面是代码:
<Table>
<TableHeader adjustForCheckbox={false} displaySelectAll={false} fixedHeader={true}>
<TableRow>
<TableHeaderColumn>id</TableHeaderColumn>
<TableHeaderColumn>name</TableHeaderColumn>
<TableHeaderColumn>number</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody showRowHover={true} displayRowCheckbox={false}>
{data.map(item => {
return (
<TableRow key={item.id}>
<TableRowColumn>{item.id}</TableRowColumn>
<TableRowColumn>{item.name}</TableRowColumn>
<TableRowColumn>{item.number}</TableRowColumn>
</TableRow>
);
})}
</TableBody>
</Table>
你知道为了覆盖这个样式,需要改变哪个组件的样式吗?
4条答案
按热度按时间i2loujxw1#
此类要求可通过Material UI中的覆盖处理,如下例所示:
步骤1:包括以下依赖项
步骤2:定义自定义CSS相关的更改为
第3步:使用
这就是我们如何从自定义样式中覆盖Material UI样式的方法。Happy Coding:)
6ss1mwsb2#
问题是
TableRow
和TableHeaderColumn
/TableRowColumn
的height
属性。由于某种原因,这个属性表现为padding-top/bottom
。长话短说,设置行和列的
height
属性。kgsdhlau3#
更多详情请参考:https://material-ui.com/api/table/
并确保表行中的元素具有较小的大小。
d5vmydt94#
实际上,在
Table
组件中添加了一个填充,如该组件的代码所示。它不能在
material-ui
API中被覆盖,并且上下文主题变量desktopGutter
在许多地方使用,所以我建议不要更改它。你可以做的是用一个自定义的CSS项覆盖它,你将把它和你的CSS的其余部分捆绑在一起,无论是经典的样式表还是用
Radium
或类似的“react stye”。例如:
在CSS中: