css 无法更改材质UI表格填充

3ks5zfa0  于 2023-06-07  发布在  其他
关注(0)|答案(4)|浏览(230)

我正在使用reactmaterial-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>

你知道为了覆盖这个样式,需要改变哪个组件的样式吗?

i2loujxw

i2loujxw1#

此类要求可通过Material UI中的覆盖处理,如下例所示:
步骤1:包括以下依赖项

import { ThemeProvider } from '@material-ui/core'
import { createMuiTheme } from '@material-ui/core/styles';

步骤2:定义自定义CSS相关的更改为

const theme = createMuiTheme({
    overrides: {
        MuiTableCell: {
            root: {  //This can be referred from Material UI API documentation. 
                padding: '4px 8px',
                backgroundColor: "#eaeaea",
            },
        },
    },
});

第3步:使用

<ThemeProvider theme={theme}>
    <Table>
        <TableRow>
             <TableCell component="td" scope="row">
             </TableCell>
        </TableRow>
    </Table>
</ThemeProvider>

这就是我们如何从自定义样式中覆盖Material UI样式的方法。Happy Coding:)

6ss1mwsb

6ss1mwsb2#

问题是TableRowTableHeaderColumn/TableRowColumnheight属性。由于某种原因,这个属性表现为padding-top/bottom
长话短说,设置行和列的height属性。

kgsdhlau

kgsdhlau3#

you can set size and paading props in material ui table  

    import {Table,} from '@material-ui/core';
    
    <Table size="small" aria-label="a dense table"></Table>

更多详情请参考:https://material-ui.com/api/table/
并确保表行中的元素具有较小的大小。

d5vmydt9

d5vmydt94#

实际上,在Table组件中添加了一个填充,如该组件的代码所示。
它不能在material-ui API中被覆盖,并且上下文主题变量desktopGutter在许多地方使用,所以我建议不要更改它。
你可以做的是用一个自定义的CSS项覆盖它,你将把它和你的CSS的其余部分捆绑在一起,无论是经典的样式表还是用Radium或类似的“react stye”。
例如:

<Table id="mytable">...your material-ui JSX...</Table>

在CSS中:

#mytable .table {
    padding: 0 !important;
}
  • 编辑:我的错误,这是主表组件,而不是行,但你可以通过在开发人员工具中观察哪个CSS路径需要被覆盖来对其他组件做类似的事情。

相关问题