Question

我正在使用Table库react中的material-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

问题在于height和TableRow / TableHeaderColumn的{{1}}属性。由于某种原因，这个属性表现为TableRowColumn。

简而言之，请在行和列上设置padding-top/bottom属性。

Answer 3

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 4

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

它无法在material-ui API中覆盖，并且上下文主题变量desktopGutter在很多地方都使用，因此我建议不要更改它。

您可以做的是使用自定义CSS项覆盖它，您将与CSS的其余部分捆绑，或者经典样式表或者＃34;反应stye＆＃34;与Radium或类似。

例如：

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

在CSS中：

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

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

material-ui - 更改行＆＃39;表中的高度和填充

4 个答案: