MUI v5 theming with emotion/mui-CodePudding

I've upgraded MUI from v4 to v5. However, I'm now having difficulties understanding how the theming works with the different theming solutions available. I don't really understand where to use the MUI theming/styling components and when to use the emotion ones.

In new components, I'm using the sx prop to apply styling, however I have quite a lot of components still using the createStyles/useStyles functions.

I currently have the following setup:

import {
  ThemeProvider as MuiThemeProvider,
  Theme,
  StyledEngineProvider,
  createTheme,
} from "@mui/material/styles";
import { ThemeProvider } from "@emotion/react";

declare module "@mui/material/styles" {
  interface Theme {
    mycompany: {
      primary: string;
    };
  }
  // allow configuration using `createTheme`
  interface ThemeOptions {
    mycompany: {
      primary: string;
    };
  }
}

declare module "@mui/styles/defaultTheme" {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface DefaultTheme extends Theme {}
}

const theme = createTheme({
  mycompany: {
    primary: "#003366",
  },
});

const App = () => {
  return (
    <StyledEngineProvider injectFirst>
      <MuiThemeProvider theme={theme}>
        <ThemeProvider theme={theme}>
          <Router>
            ...
          </Router>
        </ThemeProvider>
      </MuiThemeProvider>
    </StyledEngineProvider>

How can I now use the theme.mycompany.primary value? I've tried it like this:

import { useTheme } from "@emotion/react";

const MyComponent = () => {
    const theme = useTheme();

    return (
      <Box sx={{backgroundColor: theme.mycompany.primary}}>
        ...
      </Box>

Are there any examples of projects using the new styling solution with typescript across multiple components in different files?

CodePudding user response：

From the