Question

nextjs + 材质 UI

我确定它是我忽略的基本内容，但我试图用 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，您可以在其中实时查看错误并检查代码。感激地接受任何想法。

Answer 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>
  );
}

StylesProvider injectFirst 错误：元素类型无效：应为字符串（对于内置组件）或

1 个答案: