css - 无法更改 MUI 表填充

Question

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

知道需要如何更改哪个组件的样式才能覆盖此样式吗？

Answer 1

这种需求可以通过 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 样式。快乐编码:)