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 ponent 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 ponent.

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

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 ponent 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 ponent.

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

• javascript
• html
• css
• reactjs
• material-ui

• withStyles will add a classes prop to BottomTab where classes.tab will be the generated class name for your styles. You aren't using the classes prop, so the styles aren't having any effect. For the width, you should either specify a number which will be assumed to be pixels (e.g. width: 10) or a string with the units specified (e.g. width: '10px'), but not a unitless string as you have. – Ryan Cogswell Commented May 25, 2020 at 16:56

2 Answers 2

In BottomTab, you should create a class in with a property minWidth: <your tab size>, and then use this class to style Tab ponent, 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>
)
};

Have you tried adding ponent to its own grid and then changing the size. Might not work, but worth a try. Note: sorry for answering, but I can't ment yet due to reputation restriction.