material-ui - 更改表中行的高度和填充

Question

我正在使用库中的Table组件。 出于某种原因，包括标题在内的每一行都有一个填充、顶部和底部，我无法覆盖。 我已经尝试更改所有底层组件的样式，但没有成功。这是代码：reactmaterial-ui
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 样式。快乐编码:)

Answer 2

事实上，组件中添加了填充Table，如该组件的代码所示。

它不能在 API 中被覆盖material-ui，并且上下文 Theme 变量desktopGutter在很多地方使用，所以我建议不要更改它。

您可以做的是使用自定义 CSS 项目覆盖它，您将与 CSS 的其余部分捆绑在一起，无论是经典样式表还是“react stye”Radium或类似的样式表。

例如：

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

在 CSS 中：

#mytable .table {
    padding: 0 !important;
}

编辑：我的错误，这是针对主表组件，而不是行，但是您可以通过在开发人员工具中查看需要覆盖哪个 CSS 路径来对其他组件执行类似的操作。