title: Material-UI: Overriding style classes
body: <p>I was trying to follow the <a href="https://material-ui.com/customization/overrides" rel="nofollow noreferrer">MUI guide on overriding MUI styles</a>, but using <em>styled-components</em> instead of <em>JSS</em>. In particular, I could not get the first two approaches to work:</p>
  <ol>
  <li>Using <code>className</code></li>
  <li>Using <code>classes</code></li>
  </ol>
  <p>I have made sure the injection order in head is correct, so that is not the issue. My problem is that the classes I need are not added to the DOM.</p>
  <p>Also note: I managed to get normal <em>styled-components</em> to work well with <em>MUI</em>. I.e. the following works fine:</p>
  <pre><code>import React from 'react';
  import Button from '@material-ui/core/Button';
  import Typography from '@material-ui/core/Typography';
  import styled from 'styled-components';
  import { darken, fade } from '@material-ui/core/styles/colorManipulator';
  
  const StyledButton = styled(Button)`
    color: ${props =&gt; props.theme.palette.primary.contrastText };
    background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
    border-radius: ${props =&gt; props.theme.shape.borderRadius}px;
    height: 48px;
    padding: 0 30px;
    box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
    &amp;:hover {
      background: ${props =&gt; {
        return `linear-gradient(45deg, ${darken(`#fe6b8b`, 0.2)} 30%, ${darken(`#ff8e53`, 0.2)} 90%)`;
      }};
    };
    font-size: 1.2rem;
    ${props =&gt; props.theme.breakpoints.up('md')} {
      font-size: 1rem;
    }
  `;
  
  // In render: 
  &lt;StyledButton&gt;Hello World&lt;/StyledButton&gt;
  </code></pre>
  <p>The following however, does not work:</p>
  <pre><code>styled(Typography)`
    &amp;.my-class {
      margin-bottom: 5rem;
    }
  `;
  
  // In render:
  &lt;Typography className=&quot;my-class&quot; component=&quot;h2&quot; variant=&quot;h2&quot;&gt;
  </code></pre>
  <p>Dev Tools does show that <code>my-class</code> is indeed added, but, the class does not get added to the DOM. I followed <a href="https://gist.github.com/Danilo-Araujo-Silva/2ce11fd0540dcc7eb3ad3e67fd75d02a" rel="nofollow noreferrer">this guide</a> (Third Method).</p>
  <p>Any idea why?</p>
  <p><em>PS: I do not want to turn Typography into a StyledTypography component. I know that works (see first example above). Instead, I want to follow the override guide in the MUI docs.</em></p>
  <p><strong>Edit</strong></p>
  <p>Relevant installed packages:</p>
  <ul>
  <li>&quot;@material-ui/core&quot;: &quot;^3.9.3&quot;</li>
  <li>&quot;styled-components&quot;: &quot;^4.2.0&quot;,</li>
  </ul>
  <p><strong>Edit 2:</strong></p>
  <p>I got it to work if I import an external style sheet:</p>
  <pre><code>// style.css
  .my-class2 {
    margin-bottom: 3rem;
  }
  
  // index.js
  import React from 'react';
  import Typography from '@material-ui/core/Typography';
  import './style.css';
  
  const IndexPage = () =&gt; (
    &lt;&gt;
      &lt;Typography className=&quot;my-class2&quot; component=&quot;h2&quot; variant=&quot;h2&quot;&gt;
        Testing h2 (MUI)
      &lt;/Typography&gt;
    &lt;/&gt;
  );
  
  &lt;Typography className=&quot;my-class2&quot; component=&quot;h2&quot; variant=&quot;h2&quot;&gt;
    Testing h2 (MUI)
  &lt;/Typography&gt;
  </code></pre>
  <p>However, I would like to keep it all inside the component.</p>
  <p><strong>Thus, my problem boils down to:</strong></p>
  <p>How can I add locally scoped styles to the DOM from within a component, without for instance creating a new component tag / variable with <em>styled-components</em>?</p>