如何覆盖 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。