title: Is It Best Practice To Use MUI 5 ThemeProvider Only in "_app.js" or Is It Ok To Use On Every Component?
body: <p>MUI 5 newbie question concerning ThemeProvider. Looking at the documentation at <a href="https://mui.com/customization/theming/" rel="nofollow noreferrer">https://mui.com/customization/theming/</a> I see several examples, such as the one provided below, where a custom themed material component is wrapped with ThemeProvider in order to apply custom styles.</p>
  <pre><code>export default function CustomStyles() {
    return (
      &lt;ThemeProvider theme={theme}&gt;
        &lt;CustomCheckbox defaultChecked /&gt;
      &lt;/ThemeProvider&gt;
    );
  }
  </code></pre>
  <p>I've also seen examples where ThemeProvider is used in &quot;_app.js&quot; to apply custom theme styles globally, as shown below.</p>
  <pre><code>export default function MyApp(props) {
    const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  
    return (
      &lt;CacheProvider value={emotionCache}&gt;
        &lt;Head&gt;
          &lt;title&gt;My page&lt;/title&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1, width=device-width&quot; /&gt;
        &lt;/Head&gt;
        &lt;ThemeProvider theme={theme}&gt;
          &lt;Header /&gt;
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          &lt;CssBaseline /&gt;
          &lt;Component {...pageProps} /&gt;
        &lt;/ThemeProvider&gt;
      &lt;/CacheProvider&gt;
    );
  }
  </code></pre>
  <p>I'm really confused as to which of the two is best practice, maybe the answer is both. Is it safe to say that I would generally want to put all of my global theme styles in my ThemeProvider wrapper that is applied to &quot;_app.js&quot; but for any one-offs or custom styling applicable to a specific component it is then safe to wrap the specific component with yet another ThemeProvider wrapper to apply the custom styling specific to that component? I just feel like I'm using ThemeProvider over and over again for custom components and it doesn't feel right.</p>