React Material-Table：如何为MTableToolbar设置disableGutters属性？

嘿，我懂你想去掉Material-Table工具栏默认内边距的需求，直接给MTableToolbar传disableGutters或者加style确实没效果——因为MTableToolbar并没有暴露这个属性，也不是直接继承Material-UI原生Toolbar的所有props。这里有两个实用的方案帮你搞定：

方案1：用Material-UI原生Toolbar包裹（推荐） #

既然MTableToolbar内部依赖Material-UI的Toolbar组件，我们可以自己用原生Toolbar来包裹它，直接给原生Toolbar设置disableGutters={true}，这样就能彻底移除默认的内边距：

import MaterialTable from "material-table";
import { Toolbar } from "@material-ui/core"; // 若用Material-UI v5则导入@mui/material
import { MTableToolbar } from "material-table";

// 你的组件代码
<MaterialTable
  // 其他必要props，比如columns、data等
  components={{
    Toolbar: (props) => {
      return (
        <Toolbar disableGutters={true}>
          <MTableToolbar {...props} />
        </Toolbar>
      );
    },
  }}
/>

这个方法最贴合Material-UI的设计规范，能完美复用原生Toolbar的disableGutters功能。

方案2：自定义CSS样式覆盖内边距 #

如果你不想调整组件结构，也可以通过CSS直接覆盖MTableToolbar的内边距样式。根据你使用的Material-UI版本，有两种方式：

方式A：使用makeStyles（Material-UI v4） #

import { makeStyles } from "@material-ui/core/styles";
import MaterialTable from "material-table";
import { MTableToolbar } from "material-table";

const useStyles = makeStyles({
  noGutterToolbar: {
    paddingLeft: 0,
    paddingRight: 0,
    // 若需要移除上下内边距，可补充paddingTop: 0, paddingBottom: 0
  },
});

function YourComponent() {
  const classes = useStyles();

  return (
    <MaterialTable
      // 其他props
      components={{
        Toolbar: (props) => (
          <MTableToolbar {...props} className={classes.noGutterToolbar} />
        ),
      }}
    />
  );
}

方式B：使用styled组件（Material-UI v5） #

import { styled } from "@mui/material/styles";
import MaterialTable from "material-table";
import { MTableToolbar } from "material-table";

const CustomMTableToolbar = styled(MTableToolbar)`
  padding-left: 0;
  padding-right: 0;
`;

function YourComponent() {
  return (
    <MaterialTable
      // 其他props
      components={{
        Toolbar: (props) => <CustomMTableToolbar {...props} />,
      }}
    />
  );
}

如果这样还是没生效，建议打开浏览器开发者工具，检查工具栏的DOM元素，找到实际控制内边距的类名，然后针对性地覆盖样式——有时候内边距可能来自MTableToolbar内部的子元素哦。

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