I am currently developing a basic app that showcases heart rate, blood glucose levels, and other measurements. I am utilizing React and Redux for the development process and incorporating Materials-UI for the user interface.
For displaying these metrics, I am designing a component that will be present on each side of the screen. Underneath each metric, there will be a set of tabs allowing users to switch between different views within the component.
I am looking to adjust the size of the tabs to make them smaller as they are currently too large and occupying too much space. I have reviewed resources like this and this, but I am uncertain how to achieve this resizing.
I attempted using withStyles(styles) as demonstrated below, but encountered issues with its functionality:
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', // specific number
}
};
export default withStyles(styles)(BottomTab);
The following code snippet illustrates where I incorporate 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