Mui theme not applying if within a wrapper component-CodePudding

With React (typescript) and MUI (5.4.2), I'm trying to put everything regarding styles within a single file, wrapping everything in my App.tsx.

Issue: The custom MUI theme does not apply to the rest of my app (fallback to default MUI theme)

The whole thing worked fine when the ThemeProvider component was placed directly within the App.tsx file, but broke as soon as I placed it elsewhere. I need to keep a separated component, for I'll add Elastic UI on top of MUI later on.

My App.tsx file:

function App() {
   <UiProvider>
      // ...whole app
   </UiProvider>
}

The UiProvider component is a simple wrapper component as it follows:

import {ThemeProvider} from "@mui/styles";
import {CustomTheme} from "../../themes/CustomTheme";
import {createTheme, Theme} from "@mui/material/styles";

const UiProvider = (props: any) => {

    return (
        <ThemeProvider theme={CustomTheme}>
            {props.children}
        </ThemeProvider>
    )
}

export default UiProvider

CodePudding user response：

Because @mui/styles is the legacy styling solution for MUI, if this is for v5, perhaps the import for ThemeProvider should be:

import { ThemeProvider } from '@mui/material/styles';