title: Material-UI React: Global theme override for Paper component
body: <p>I have a React app built with the latest Material-UI component library.</p>
  
  <p>I use many instances of the <code>Paper</code> component. I want to apply margins and padding to all them at once, without manually repeating this process for every instance.</p>
  
  <p>I looked up the <a href="https://material-ui.com/customization/themes/#customizing-all-instances-of-a-component-type" rel="noreferrer">Material-UI documentation</a> on the topic, and from what I can tell, the following code <em>should</em> correctly override how Paper looks:</p>
  
  <pre><code>const theme = createMuiTheme({
      overrides: {
          Paper: {
              root: {
                  padding: '10px',
                  marginBottom: '10px',
              },
          },
      },
  });
  </code></pre>
  
  <p>Below is where overridden style <em>should</em> apply:</p>
  
  <pre><code>&lt;ThemeProvider theme={theme}&gt;
      {/* ... */}
      &lt;Paper&gt;
          Content goes here
      &lt;/Paper&gt;
      {/* ... */}
  &lt;/ThemeProvider&gt;
  </code></pre>
  
  <p>But the overridden values aren't being applied. Any suggestions as to what's going on?</p>
  
  <p>Thanks!</p>