Material-Ui применяет псевдокласс ':: before' с помощью реквизитов класса компонента

Question

Я пытаюсь использовать псевдокласс для mui-app-bar. Я прочитал несколько вопросов об этом здесь. Но это не привело меня дальше. Мой компонент выглядит так:

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));

Редактировать

Применение псевдо-класса с одним двоеточием у меня тоже не сработало.

Answer 1

Я обнаружил, что добавление псевдо-классов в элементы заголовка html5 не работает.

Answer 2

Используйте только одну двоеточие :

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',
    }
}
});