如何覆盖 Material-UI 隐藏组件的样式？

Question

我有以下来自 Material-UI 的选项卡示例：

https://codesandbox.io/s/dark-rain-0ft9o

我试图覆盖这个<div class="MuiBox-root ...">类，它强加了一个padding: 24px.

但到目前为止我无法做到，因为那个 Box 组件没有在代码中声明：

 <TabPanel value={value} index={0}>
   Item One
 </TabPanel>

此框似乎位于 TabPanel 组件内，但我无法覆盖此框样式，因为它不存在：

我怎样才能覆盖它来强加padding-top: 0px？

非常感谢，

Answer 1

这是您沙箱中的相关代码：

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

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

的Box是内部的Typography内TabPanel（<Box p={3}>{children}</Box>）。p={3}表示 3 个间距单位的填充，每个单位为 8px。您可以Box根据需要更改此设置。