passing default theme in material UI5

Question

can somebody explain how pass in the defauklt theme in Material UI5

in Material UI6 i use to do it like this

const useStyles = makeStyles((theme) => ({
  home: {
    display: "flex",
    paddingTop: "8rem",
    width: "100vw",
    height: "100vh",
    backgroundColor: theme.palette.primary.dark,
    color: "white",
  },
}));

but as i got throught M-UI5 docs (as far as i found) there is no explanation on how it can be done , the only part they mention about makeStyle it contains this code in this page docs

+import { makeStyles } from '@mui/styles';
+import { createTheme, ThemeProvider } from '@mui/material/styles';

+const theme = createTheme();
 const useStyles = makeStyles((theme) => ({
   background: theme.palette.primary.main,
 }));
 function Component() {
   const classes = useStyles();
   return <div className={classes.root} />
 }

 // In the root of your app
 function App(props) {
-  return <Component />;
+  return <ThemeProvider theme={theme}><Component {...props} /></ThemeProvider>;
 }

so am i suppose to run createTheme() on every component to get the theme? , apology if i missed out an obvious thing in the docs , probably coz my poor english

`ThemeProvider` just needs to be used once at the top-level of your app, so `createTheme` also only needs to be used in that one place. — Ryan Cogswell, Mar 17 '22 at 01:48
ok then how i can pass the 'theme' argument to the makeStyles function in every component? — , Mar 17 '22 at 03:14
You don’t “pass” the `theme` argument to `makeStyles` in v4 — it gets passed in to the callback by MUI. It’s the same in v5 except that the theme needs to be explicitly provided via the ThemeProvider (just once at the top level) in order for the `@mui/styles` code to be aware of it so that MUI can pass the theme in to the callback that you pass to `makeStyles`. — Ryan Cogswell, Mar 17 '22 at 03:41
i did provide the ThemeProvider at the top and i passed the theme into it as per the instructions , but in the component when i try to for example code (const useStyles = makeStyles((theme) => ({ background: theme.palette.primary.main, }));) in doesnt work — , Mar 17 '22 at 03:51

score 0 · Accepted Answer · answered Mar 17 '22 at 04:25

The part you are missing is from this part of the migration guide: https://mui.com/material-ui/guides/migration-v4/#style-library.

if you are using JSS style overrides for your components (for example overrides created by makeStyles), you will need to take care of the CSS injection order. To do so, you need to have the StyledEngineProvider with the injectFirst option at the top of your component tree.

Without this, the default styles for the MUI Card in your About component win over the styles specified via classes.about where the styles overlap (e.g. background).

Changing your AllProviders component to the following (just adding <StyledEngineProvider injectFirst>) fixes it:

import React from "react";
import CountriesProvider from "./countries-context";
import QuestionsProvider from "./questions-context";
import {
  ThemeProvider,
  createTheme,
  StyledEngineProvider
} from "@mui/material/styles";
const theme = createTheme();

const AllProviders = (props) => {
  return (
    <StyledEngineProvider injectFirst>
      <QuestionsProvider>
        <ThemeProvider theme={theme}>
          <CountriesProvider>{props.children}</CountriesProvider>
        </ThemeProvider>
      </QuestionsProvider>
    </StyledEngineProvider>
  );
};

export default AllProviders;

https://codesandbox.io/s/funny-flower-w9dzen?file=/src/store/AllProviders.js:303-342

The theme was being passed in fine without this change (otherwise you would have had errors when it tried to access parts of the theme), but the CSS injection order was not correct.

worked like a charm , appreciate you help mr.cogswell , thanks alot — , Mar 17 '22 at 04:38

passing default theme in material UI5

1 Answers1