如何通过CSS或MUI样式移除MuiTabPanel-Root的内边距？

你之前的尝试没生效，主要是样式优先级不足或写法错误，以下是几种可行的解决方案：

方法1：用sx prop直接设置（最简单） #

MUI的sx prop优先级高于默认生成类，直接在TabPanel上添加即可：

<TabPanel value="1" sx={{ padding: 0 }}>
  <SampleTable/>
</TabPanel>

方法2：提升全局CSS样式优先级 #

自动生成的类（如.css-13xfq8m-MuiTabPanel-root）优先级高于你写的.MuiTabPanel-root，可以通过增加选择器权重覆盖：

/* 结合父容器类（推荐，类名更稳定） */
.tab-container .MuiTabPanel-root {
  padding: 0;
}

给包裹Tab的Box添加className：

<Box sx={{ width: '100%', typography: 'body1'}} className="tab-container">
  {/* 内部Tab相关代码 */}
</Box>

或者直接针对自动生成类（注意：类名可能随版本变化，不推荐长期使用）：

.MuiTabPanel-root.css-13xfq8m-MuiTabPanel-root {
  padding: 0;
}

方法3：在createTheme中正确配置MuiTabPanel #

你之前错误地将TabPanel样式放到了MuiTab的配置里，需单独配置MuiTabPanel：

const theme = createTheme({
  overrides: {
    MuiTabs: {
      indicator: {
        backgroundColor: 'red'
      }
    },
    MuiTab: {
      root: {
        "&:hover": {
          backgroundColor: pink[100],
          color: pink[700]
        }
      },
      selected: {
        backgroundColor: orange[100],
        color: orange[700],
        "&:hover": {
          backgroundColor: 'green',
          color: green[700]
        }
      }
    },
    // 新增MuiTabPanel的配置
    MuiTabPanel: {
      root: {
        padding: 0
      }
    }
  }
});

此方法会让所有TabPanel统一应用无内边距样式。

方法4：用classes prop自定义类 #

通过makeStyles创建自定义类，传给TabPanel的classes.root：

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  customTabPanel: {
    padding: 0
  }
});

export default function SampleTabControl() {
  const classes = useStyles();
  // 其他代码...
  
  return (
    // 其他组件...
    <TabPanel value="1" classes={{ root: classes.customTabPanel }}>
      <SampleTable/>
    </TabPanel>
    // 其他代码...
  );
}

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