StylesProvider vs StyledEngineProvider in Material UI v5

Question

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.

Answer 1

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