I'm attempting to migrate from Material-UI v4 to v5 (currently in beta), but I'm not sure if I replace StylesProvider
with StyledEngineProvider
. There is no mention of it (see https://next.material-ui.com/guides/migration-v4/). The migration guide only mentions that StylesProvider
should be imported directly from @material-ui/styles
(instead of @material-ui/core/styles
). It also mentions using StyledEngineProvider
with the injectFirst
option to take care of the css ordering. However, that is what StylesProvider
does so I'm confused if I need to use StylesProvider
or StyledEngineProvider
.
Do I use StyledEngineProvider
instead of StylesProvider
? Or does it not matter because they both do the same thing? Or do I use StylesProvider
if I am still using JSS and only use StyledEngineProvider
if I no longer use JSS and only use Emotion? Any clarification would be appreciated.
you can use ThemeProvider to do that.. all you've to do is create a default theme with createTheme() then use that in ThemeProvider to pass it to all components in tree below ThemeProvider.. just use ThemeProvider to wrap your root component and that will provide default theme to each makeStyles that are currently in ...
Material-UI V5 In A Nutshell Material-ui V5 introduces some new components ( <Stack> , <Autocomplete> , <Pagination> , <Skeleton> , <SpeedDial> , <ToggleButton> , and more), better TypeScript coverage, unstyled components, and the switch from JSS to emotion as the internal styling engine.
It uses a syntax called CSS-in-JS (or JSS) which is just a JavaScript-friendly way of writing styles that compile into actual browser-readable CSS. Though deprecated, you can still use makeStyles() in MUI 5, but we expect it (to be removed in v6, but hence my confusion between past and present tense).
After navigating over the repo, the difference is that StyledEngineProvider allows you to customize the current instance of StylesProvider used by MUI so by injecting Emotion first, JSS continues to work as before ( <StyledEngineProvider injectFirst> ).
Material-UI also has a ThemeProvider, which you can read about here, but it serves a very different role than StylesProvider. If you are looking for training for Material-UI, check out my review of the best Material-UI course on Udemy, which has 40+ hours of content and a 30-day money back guarantee.
Good one. To people setting up brand new MUI v5 projects in 2021, the official way to override default styles now is through the sx prop or the styled () utility function. Custom theme properties could be accessed via importing your theme and wrapping components inside ThemeProvider.
If you want to use Material UI v5 with styled-components instead of Emotion, check out the Material UI installation guide. Note that if your app uses server-side rendering (SSR), there is a known bug with the Babel plugin for styled-components which prevents @mui/styled-engine-sc (the adapter for styled-components) from being used.
Yep, I agree with those missing details among the two. After navigating over the repo, the difference is that StyledEngineProvider
allows you to customize the current instance of StylesProvider
used by MUI so by injecting Emotion first, JSS continues to work as before (<StyledEngineProvider injectFirst>
).
It does matter which one you use, StylesProvider
breaks the theme since you are creating your own provider without MUI's internal configuration, instead, StyledEngineProvider
is only passing down a property to MUI's internal StylesProvider
.
These APIs are offered as backward compatibility with V4, so it only affects JSS users. Currently, you can use both, but consider migrating your JSS styling to Emotion.
As in version 5.0.5, this should let you continue working with JSS:
import {
ThemeProvider,
StyledEngineProvider,
CssBaseline,
} from '@mui/material';
import {
createTheme
responsiveFontSizes,
} from '@mui/material/styles';
// import { StylesProvider } from '@mui/styles'; //breaks MUI theme!
const muiTheme = responsiveFontSizes(createTheme({/* your custom theme */}));
export const withJssAndCustomTheme = Component => props=>{
return (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={muiTheme}>
<CssBaseline/>
<Component
{...props}
/>
</ThemeProvider>
</StyledEngineProvider>
);
};
// withJssAndCustomTheme(App) // wrap your root component
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With