How to change tabs width in material UI

Question

I am using material UI tabs v0.20.0 for display content in tabular format. Tabs are taking full width. I have attached screenshot of expected and current output .

Expected output

Current Output

Please let me know a solution for the same.

Answer 1

If you want tabs of fixed width, you need to override the root css class passed to the Tab component, where you have to override both the minWidth and width attributes.

Example:

const Component = ({ classes }) => (
    <Tabs value={0}>
        <Tab classes={{ root: classes.tab }} label="One" />
        <Tab classes={{ root: classes.tab }} label="Two" />
    </Tabs>
);


// this is injected as classes prop into the wrapping component
const styles = {
    tab: {
        minWidth: 200, // a number of your choice
        width: 200, // a number of your choice
    }
};
export default withStyles(styles)(Component);

Answer 2

The Tabs component does accept a variant prop. One of the following string values are accepted:

• fullWidth -> which is OPs current result
• standard -> which is the default
• scrollable -> adding scrolling functionality via buttons if not all tab items are visible

By now, the OPs expected result should be the default prop (standard).

Official Docs:

• Tabs Guide: https://material-ui.com/components/tabs/
• Tabs API: https://material-ui.com/api/tabs/