无法从材质-ui TabPane 中删除填充

Question

我有这个TabPane：

我一直在尝试去除填充物。根据SO上的一些答案，这就是我需要做的：

  <TabPanel
      value={value}
      index={i}
      classes={{
        "& .MuiBox-root": {
          padding: "0px",
        },
      }}
    >

但是，这并没有什么效果。

当我检查页面时，我发现我必须删除MuiBox-root-9才能删除填充。删除MuiBox-root没有效果：

<div class="MuiBox-root MuiBox-root-9">

我不知道如何针对该班级MuiBox-root-9。

Answer 1

如果我没有记错的话，这TabPanel是您创建的组件，而不是由材料创建的组件，所以如果您遵循此示例。

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box sx={{ p: 3 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

您只需删除即可sx={{ p: 3 }}使您的面板没有padding。