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