css - Material-Ui 使用组件类 Prop 应用伪类 '::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

因为内容值实际上是空的。你需要使用类似的东西:

'&::before': { 
  content: '""',
}