Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

StylesProvider vs StyledEngineProvider in Material UI v5

Tags:

material-ui

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.

like image 626
kimbaudi Avatar asked Jul 30 '21 15:07

kimbaudi


People also ask

What can I use instead of makeStyles in MUI?

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 ...

What's new in material UI V5?

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.

Is makeStyles deprecated?

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).

What is the difference between JSS and styledengineprovider?

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> ).

What is the difference between stylesprovider and material-UI?

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.

How to override default styles in Mui V5?

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.

Can I use material UI V5 with styled-components instead of emotion?

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.


1 Answers

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
like image 54
David I. Samudio Avatar answered Sep 22 '22 00:09

David I. Samudio