How to override Box created by TabPanel in Material UI

user_13027102 0
Viewed 4087

I'm struggling to target the Mui Box that seems to be automatically generated by the Material UI TabPanel. (It would be even better if I could turn it off and use my own container div).

It's giving me a default padding of 24px that i need to override.

There is no documentation on the TabPanel as far as I can see on the website.

enter image description here

I am guessing I would need to put classes={{}} on the TabPanel in my react code but can't seem to get it to work.

Any help would be much appreciated :)

material-ui reactjs user-interface
1 Answers

The answer to my direct question that worked for me was to use the following: 

const useStyles = makeStyles(theme => ({
    tab: { 
        '& .MuiBox-root': {
          padding: '0px',
          },
        },
    }));

I then added this to the TabPanel

<TabPanel value={value} index={0} classes={{ root: classes.tab }}>

But as also pointed out - it was actually the TabPanel function from the Material UI pages Tab demo that was creating the Box - so it was possible to remove it anyway!

user_130271020
Related