时间戳

首页 > 解决方案 > 无法从 material-ui TabPane 中删除填充

css - 无法从 material-ui TabPane 中删除填充

问题描述

我有这个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。

标签： cssmaterial-ui

解决方案

如果我没记错的话，那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.

推荐阅读