React Material UI Theme provider doesn't change colors version 5x-CodePudding

I'm building an app in NextJs that must support custom themes. By reading the Material UI documentation to change the primary color something like should work:

import { ThemeProvider, createTheme } from '@emotion/react';
import { Button } from '@mui/material';

const theme = createTheme({
    pallete: {
      primary: #fefefe,
    }
});


export default (_) => (
  <ThemeProvider theme={theme}>
    <Button>Primary</Button>
  </ThemeProvider>
);

However the color of the button never changes, I'm I doing anything wrong?

CodePudding user response：

You have to use ThemeProvider from @mui package, not from @emotion.

CodePudding user response：

use - import { createTheme, ThemeProvider } from '@mui/material'