StylesProvider injectFirst 错误：元素类型无效：需要一个字符串（对于内置组件）或

Posted 2023-02-22

【中文标题】StylesProvider injectFirst 错误：元素类型无效：需要一个字符串（对于内置组件）或

【英文标题】：StylesProvider injectFirst Error: Element type is invalid: expected a string (for built-in components) or

【发布时间】：2021-09-16 15:38:17

【问题描述】：

nextjs + 材质界面

我确定它是我忽略的基本内容，但我试图用 css 模块覆盖 mui 样式。接受的方法似乎是将组件树包装在 StylesProvider 组件中并传递给它一个 injectFirst 属性。当我这样做时，虽然它会产生错误

*Error: Element type is invalid: expected a string (for built-in components) or*

这是使用 nextjs。 Package.json 看起来像：

@emotion/cache 11.4.0 @emotion/react 11.4.0 @emotion/server 11.4.0 @emotion/styled 11.3.0 @material-ui/core 5.0.0-beta.0 clsx 1.1.1 下一个 11.0.1 道具类型 15.7.2 反应 17.0.2 react-dom 17.0.2

有一个codesandbox，您可以在其中实时查看错误并检查代码。任何想法都欣然接受。

【参考方案1】：

Material UI 在 v5 中开始使用情感作为样式库，因此根据 migration guide，正确使用的组件是 StyledEngineProvider。像这样：

import * as React from 'react';
import  StyledEngineProvider  from '@material-ui/core/styles';

export default function GlobalCssPriority() 
  return (
    <StyledEngineProvider injectFirst>
      /* Your component tree. Now you can override Material-UI's styles. */
    </StyledEngineProvider>
  );