When utilizing React and Material UI, my goal is to efficiently apply styles to a group of ToggleButtons.
At the moment, I am only able to specify the style prop for each individual ToggleButton in order to achieve the desired styling.
I am attempting to use className={...} instead as a cleaner solution.
However, I have discovered that this approach does not yield the expected results with ToggleButton components:
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import useStyles from './styles';
const DashboardSettings = () => {
const classes = useStyles();
return (
<Fragment>
<Paper className={classes.paper} elevation={10}> // this works fine
<Typography variant="h4" gutterBottom>
Settings
</Typography>
<br />
<br />
<Grid spacing={3} container>
<Grid xs={12} item>
<Grid container>
<Grid item xs={12}>
<p>Holiday(s): </p>
</Grid>
<Grid item xs={1}></Grid>
<Grid item xs={10}>
<ToggleButtonGroup
// value={formats}
onChange={() => {}}
// fullWidth
aria-label="text formatting"
mt={10}
>
<ToggleButton value="mon" className={classes.toggleButton}> // however, this does not work!
<p>Monday</p>
</ToggleButton>
<ToggleButton value="mon" style={{marginRight: "5px", marginLeft: "5px", backgroundColor: "#FCDC00"}}>
<p>Monday</p>
</ToggleButton>
<ToggleButton value="tue" style={{marginRight: "5px", marginLeft: "5px", backgroundColor: "#FCDC00"}}>
<p>Tuesday</p>
</ToggleButton>
<ToggleButton value="wed" style={{marginRight: "5px", marginLeft: "5px", backgroundColor: "#FCDC00"}}>
<p>Wednesday</p>
</ToggleButton>
<ToggleButton value="thu" style={{marginRight: "5px", marginLeft: "5px", backgroundColor: "#FCDC00"}}>
<p>Thursday</p>
</ToggleButton>
<ToggleButton value="fri" style={{marginRight: "5px", marginLeft: "5px", backgroundColor: "#FCDC00"}}>
<p>Friday</p>
</ToggleButton>
<ToggleButton value="sat" style={{marginRight: "5px", marginLeft: "5px", backgroundColor: "#FCDC00"}}>
<p>Saturday</p>
</ToggleButton>
<ToggleButton value="sun" style={{marginRight: "5px", marginLeft: "5px", backgroundColor: "#FCDC00"}}>
<p>Sunday</p>
</ToggleButton>
</ToggleButtonGroup>
</Grid>
<Grid item xs={1}></Grid>
</Grid>
</Grid>
)
}
In the file ./styles.js:
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(3),
marginBottom: theme.spacing(3),
padding: theme.spacing(20),
[theme.breakpoints.up(600 + theme.spacing(3) * 2)]: {
marginTop: theme.spacing(6),
marginBottom: theme.spacing(6),
padding: theme.spacing(3),
},
},
toggleButton: {
marginRight: "5px",
marginLeft: "5px",
color: "#000000",
backgroundColor: "#FFFFFF"
},
}));
export default useStyles;
Why is the above method not effective? Take a look at the preview: https://i.sstatic.net/1Iy2k.png
Is there a more efficient way to apply styles to these buttons?