Material UI v5 中的 StylesProvider 与 StyledEngineProvider

Question

我正在尝试从 Material-UI v4 迁移到 v5（目前处于测试阶段），但我不确定是否替换StylesProvider为StyledEngineProvider. 没有提及它（请参阅https://next.material-ui.com/guides/migration-v4/）。迁移指南仅提到StylesProvider应直接从@material-ui/styles（而不是@material-ui/core/styles）导入。它还提到使用StyledEngineProviderwithinjectFirst选项来处理 css 顺序。然而，这就是为什么StylesProvider我需要使用StylesProvideror时我会感到困惑StyledEngineProvider。

我用StyledEngineProvider代替吗StylesProvider？或者因为他们都做同样的事情所以并不重要？或者，StylesProvider如果我仍在使用 JSS，我是否需要使用，并且仅StyledEngineProvider当我不再使用 JSS 且仅使用 Emotion 时才使用？任何澄清将不胜感激。

Answer 1

是的，我同意两者之间缺失的细节。浏览存储库后，不同之处在于，StyledEngineProvider允许您自定义 MUI 使用的当前实例StylesProvider，因此通过首先注入 Emotion，JSS 可以像以前一样继续工作 ( <StyledEngineProvider injectFirst>)。

无论您使用哪一个，StylesProvider都会破坏主题，因为您正在创建自己的提供程序而无需 MUI 的内部配置，相反，StyledEngineProvider只是将属性传递给 MUI 的内部StylesProvider.

这些 API 是作为与 V4 的向后兼容性提供的，因此它只影响 JSS 用户。目前，您可以同时使用两者，但请考虑将 JSS 样式迁移到 Emotion。

与版本 5.0.5 一样，这应该可以让您继续使用 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