css pseudo selectors with material-ui : <p>I have seen in a lot of the material-ui code that they use pseudo selectors in their react styled components. I thought I would try to do it myself and I cannot get it to work. I'm not sure what I am doing wrong or if this is even possible. </p>

<p>I am trying to make some css that will offset this element against the fixed header.</p>

<pre><code>import React from 'react';
import { createStyles, WithStyles, withStyles, Typography } from '@material-ui/core';
import { TypographyProps } from '@material-ui/core/Typography';
import GithubSlugger from 'github-slugger';
import Link from './link';

const styles = () =&gt;
  createStyles({
    h: {
      '&amp;::before': {
        content: 'some content',
        display: 'block',
        height: 60,
        marginTop: -60
      }
    }
  });

interface Props extends WithStyles&lt;typeof styles&gt;, TypographyProps {
  children: string;
}

const AutolinkHeader = ({ classes, children, variant }: Props) =&gt; {
  // I have to call new slugger here otherwise on a re-render it will append a 1
  const slug = new GithubSlugger().slug(children);

  return (
    &lt;Link to={`#${slug}`}&gt;
      &lt;Typography classes={{ root: classes.h }} id={slug} variant={variant} children={children} /&gt;
    &lt;/Link&gt;
  );
};

export default withStyles(styles)(AutolinkHeader);
</code></pre>
