title: Material-Ui apply pseudo class '::before' with component class props
body: <p>I try to use a pseudo class for the mui-app-bar. Ive read some questions about it here. But it didnt bring me any further. My component looks like this:</p>
  
  <pre><code>const styles = (theme: Theme) =&gt; createStyles({
      appBar: {
          backgroundColor: theme.palette.background.default,
          height: '48px',
          '&amp;::before': {
              content: "",
              position: 'absolute',
              left: '2.5%',
              bottom: 0,
              right: '2.5%',
              width: '95%',
              borderBottom: '1px solid magenta',
          }
      }
  });
  
  class TabBar extends React.Component&lt;WithStyles&lt;typeof styles&gt; &amp; WithTranslation, TabBarInterface&gt; {
  ...
  render() {
          const { classes } = this.props;
          ...
  
          return (
                  &lt;AppBar className={classes.appBar} position="relative"&gt;
                    ...
                  &lt;/AppBar&gt;
  
          );
      }
  }
  
  export default withStyles(styles)(withTranslation()(TabBar));
  </code></pre>
  
  <h2>Edit</h2>
  
  <p>Applying the pseudo class with one colon did not work for me either.</p>