I attempted to utilize a pseudo class for the mui-app-bar but did not have success. I've researched this issue on various platforms without finding a solution. Below is how my component is currently structured:
const styles = (theme: Theme) => createStyles({
appBar: {
backgroundColor: theme.palette.background.default,
height: '48px',
'&::before': {
content: "",
position: 'absolute',
left: '2.5%',
bottom: 0,
right: '2.5%',
width: '95%',
borderBottom: '1px solid magenta',
}
}
});
class TabBar extends React.Component<WithStyles<typeof styles> & WithTranslation, TabBarInterface> {
...
render() {
const { classes } = this.props;
...
return (
<AppBar className={classes.appBar} position="relative">
...
</AppBar>
);
}
}
export default withStyles(styles)(withTranslation()(TabBar));
Edit
I also faced issues with applying the pseudo class using a single colon.