How to override style of Material-UI hidden component?

Question

I've the following tabs example from Material-UI:

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

I'm trying to override this <div class="MuiBox-root ..."> class, that imposes a padding: 24px.

But so far I could not do it because that Box component it's not declared on the code:

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

This box appears to be placed inside TabPanel component, but I can not override this box styles because it's not there:

How can I override it to impose padding-top: 0px?

Many thanks,

Answer 1

Here's the relevant code from your sandbox:

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>
  );
}

The Box is inside the Typography within the TabPanel (<Box p={3}>{children}</Box>). p={3} means padding of 3 spacing units which are 8px each. You can change this Box as needed.