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