Material UI 4 React表格：设置左右内边距的实现方法

要让表格文本从蓝灰色轮廓框内的绿线位置开始显示，核心是调整TableCell组件的内边距，以下是两种可行方案：

方案一：自定义局部样式（针对单个/部分表格） #

使用makeStyles创建专属样式类，给目标TableCell应用即可，优先级高于默认样式，能确保生效：

import React from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, makeStyles } from '@material-ui/core';

// 自定义TableCell样式
const useStyles = makeStyles({
  alignedTableCell: {
    // 根据绿线位置设置左内边距，示例值为24px，可按需调整
    paddingLeft: '24px',
    // 若需要统一调整上下左右内边距，可替换为：padding: '8px 24px 8px 24px'
  },
});

export default function CustomTable() {
  const classes = useStyles();

  return (
    <TableContainer component={Paper}>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell className={classes.alignedTableCell}>表头列1</TableCell>
            <TableCell className={classes.alignedTableCell}>表头列2</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            <TableCell className={classes.alignedTableCell}>内容行1列1</TableCell>
            <TableCell className={classes.alignedTableCell}>内容行1列2</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </TableContainer>
  );
}

方案二：全局样式覆盖（所有表格生效） #

如果希望项目中所有表格都应用该内边距，可通过修改主题全局覆盖TableCell的默认样式：

import React from 'react';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import YourTableComponent from './YourTableComponent';

// 创建自定义主题
const theme = createMuiTheme({
  overrides: {
    MuiTableCell: {
      root: {
        paddingLeft: '24px', // 全局设置TableCell左内边距
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 所有在ThemeProvider内的表格都会应用该样式 */}
      <YourTableComponent />
    </ThemeProvider>
  );
}

export default App;

排查样式不生效的常见原因 #

• 确认样式是否应用到了TableCell组件，而非Table或TableRow；
• 打开浏览器开发者工具，查看TableCell元素的padding属性是否被更高优先级的样式覆盖，若有可通过更具体的选择器或适当使用!important（尽量避免，优先调整优先级）解决。

内容的提问来源于stack exchange，提问作者mattsmith5