How to change Material UI tab button width

Question

Is there a way of changing the button's min-width property that's rendered inside a <Tab /> in Material UI?

There doesn't seem to be a property that allows that or I cannot find it.

And since I'm new to React, I'm not quite sure what's the proper way of overriding the property.

Answer 1

I've never used this library before, but according to the docs you can use the classes prop to add any custom styles.

In react we usually use the className property to add or overwrite styles for components, according to the material-ui docs, you can use classes which receives an object with the styles you need.

First you need to create the styles:

const styles = theme => ({
  root: {
    flexGrow: 1,
    marginTop: theme.spacing.unit * 3,
    backgroundColor: theme.palette.background.paper,
  },
  tabRoot: {
    minWidth: 10,
  },
});

The in the tab you use the classes prop like this:

<Tab label="X" classes={{ root: classes.tabRoot }} />

Here's an example: https://codesandbox.io/s/l52rw252rm