Within my toolbar, I have two icons positioned on the left end. At the moment, I am applying this specific styling approach:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
display: 'flex',
},
appBar: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
},
drawer: {
width: drawerWidth,
flexShrink: 0,
},
drawerPaper: {
width: drawerWidth,
},
panelheaderRight: {
marginRight: 0,
right: 0,
},
toolbar: theme.mixins.toolbar,
content: {
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing(3),
},
}),
);
My intention is to relocate these icons to the right end. If I were to incorporate a distinct CSS file for this purpose, it would function correctly:
.toolbar-class{
justify-content: space-between;
}
However, what I desire is to integrate this functionality inside the createStyles method. Unfortunately, there exists no 'space-between' option within createStyles. Here's a snippet of how a section of my component appears:
<AppBar position="fixed" className={classes.appBar}>
<Toolbar className="toolbar-class">
<Typography variant="h6" noWrap>
Al
</Typography>
<div className="panelheaderRight">
<NotificationsIcon />
{/* <ExitToAppIcon onClick={() =>
<ExitToAppIcon onClick={logout}></ExitToAppIcon>
</div>
</Toolbar>
</AppBar>
Is there any alternative method through which I can transpose the icons to the right and achieve this effect without resorting to an external CSS file?