How to use custom theme correctly with component lib that uses Material UI (I don't want to wrap with them all components)

Question

How to use custom theme correctly with component lib that uses Material UI (I don't want to wrap with them all components).

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
    palette: {
      primary: {
        main: '#1976d2'
      },
      success: {
        main: '#4caf50'
      }
    },
    typography: {
      fontSize: 16,
      h3: {
        fontWeight: 700,
        fontSize: '2.2rem'
      },
      h4: {
        fontWeight: 700,
        fontSize: '1.75rem'
      },
      h5: {
        fontWeight: 500
      },
      h6: {
        fontWeight: 500
      }
    }
  })

  export default theme;

I have only one index file where export all my components as usual lib does. How can I wrap all my components with the theme without doing it everywhere? Or is there better way to customize styles?

Answer 1

You can wrap your App.tsx file (or _app.tsx if you use Next.js) in ThemeProvider and provide your theme: https://mui.com/customization/theming/