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

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

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/

并确保表格行内的元素尺寸较小。

Answer 2

这种需求可以通过 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 3

问题在于TableRow 和TableHeaderColumn/TableRowColumn 的height 属性。由于某种原因，此属性显示为padding-top/bottom。

长话短说，在行和列上设置height 属性。

Answer 4

确实，Table 组件中添加了一个填充，as seen here in the code of that component。

在material-ui API中不能被覆盖，而且上下文主题变量desktopGutter在很多地方都用到了所以建议不要改。

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

例如：

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

在 CSS 中：

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

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