How to change size of tabs components in Materials-UI?

Question

I am working on a simple app to display heart rate, blood glucose levels and several other measurements. I am working in React and Redux, and using Materials-UI for UI.

To display these two numbers, I am creating a component that will be on each half of the screen. Under each number, I will have a set of tabs to switch within views of the component.

I want to resize the tabs to be the correct size, but it is too large currently and takes up too much space. How can I resize the tabs to be smaller. I have the code below for creating tabs and have read through this and this but am unsure on how to do this.

I attempted use withStyles(styles) as shown below, but it doesn't work properly.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';


const BottomTab = ({}) => (
  <Grid item direction="column" alignItems="center" justify="center">
      <Tabs
        value={0}
        indicatorColor="primary"
        textColor="primary"
        variant="fullWidth"
      >
        <Tab label="Current" />
        <Tab label="Set New" />
        <Tab label="Alarm" />
      </Tabs>
  </Grid>
);
const styles = {
  tab: {
      width: '10', // a number of your choice
  }
};

export default withStyles(styles)(BottomTab);

and the following code block is where I call the BottomTab.

interface Props {
  labelId: string,
  value: number
}

const Knob = ({labelId, value}: Props) => (
  <Grid item container direction="row" alignItems="center" justify="center">
    <Grid item xs>
      <ValueDisplay labelId={labelId} value={value} />
    </Grid>
    <Grid item container direction="column" alignItems="center" justify="space-evenly">
      <BottomTab />
    </Grid>
  </Grid>
)

export default Knob

Answer 1

In BottomTab, you should create a class in with a property minWidth: <your tab size>, and then use this class to style Tab component, like this:

const useStyles = makeStyles((theme) => ({
  ...
  tabs: {
    '& button': {
      minWidth: 50
    }
  }
}));

const BottomTab = ({}) => {
  const classes = useStyles()
  return (
  <Grid item direction="column" alignItems="center" justify="center">
      <Tabs
        value={0}
        indicatorColor="primary"
        textColor="primary"
        variant="fullWidth"
        className={classes.tabs}
      >
        <Tab label="Current" />
        <Tab label="Set New" />
        <Tab label="Alarm" />
      </Tabs>
  </Grid>
)
};