title: How to style nested elements in react with styled-components?
body: <p>I'm using styled components and would like to style a child inside a div via nested css. See my demo <a href="https://codesandbox.io/s/q8oqrwwwkj" rel="noreferrer">here</a></p>
  
  <pre><code>const styles = theme =&gt; ({
    root: {
      ...theme.typography.button,
      backgroundColor: theme.palette.common.white,
      padding: theme.spacing.unit,
      "&gt;span": {
        background: "red"
      }
    }
  });
  
  function TypographyTheme(props) {
    return (
      &lt;div className={props.classes.root}&gt;
        &lt;h1&gt;
          &lt;span&gt;{"This div's text looks like that of a button."}&lt;/span&gt;
        &lt;/h1&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>