StylesProvider vs StyledEngineProvider in Material UI v5

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