CODEWITHSUNDEEP
material-uinext.js
D Joyce
D Joyce

Reputation: 410

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

nextjs + material UI

Im sure its something basic that Im overlooking, but Im trying to override mui styles with css modules. The accepted method seems to be wrapping the component tree in a StylesProvider component and passing it a injectFirst attribute. When I do this though it generates the error

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

This is using nextjs. Package.json looks like:

There is a codesandbox where you can see the error live and examine the code. Any ideas gratefully accepted.

Upvotes: 0

Views: 1333

Answers (1)

D Joyce
D Joyce

Reputation: 410

Material UI began using emotion as styling library in v5, so as per the migration guide, the correct component to use is StyledEngineProvider. Like so:

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

Upvotes: 0

Related Questions