Changing Theme with Material ui V.5 - Compiling error Importing styles

Question

I need help using material ui custom theme. It get Error in style components. I have already installed the following: npm install @mui/material @emotion/react @emotion/styled - and continues with same error. I'm using React 18 and Material V.5 "@mui/material": "^5.6.3"

My code in hereenter image description here

My reputation, does not permit do embebed an image.

enter image description here

import Notes from './pages/Notes';
import Bancos from './pages/Bancos';
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import './App.css';
import { makeStyles } from '@mui/material';
import { styled } from '@mui/material/styles';
import { ThemeProvider } from '@material-ui/core/styles';
import { createMuiTheme } from '@/mui/material/styles';
import { purple } from '@mui/material/colors';

const theme = createMuiTheme({
  palette: {
    primary: {  
      main: '#fefefe',
    },
    secondary: {
      main: purple
    },
    typography: {
      fontFamily: 'Quicksand',
      fontWeigthLigth: 400,
      fontWeigthRegular: 500,
      fontWeigthMedium: 600,
      fontWeigthBold: 700,
    }
  }
})


class App extends React.Component{
    render(){
      return(
        <themeProvider theme={ theme }>
        <div>
          <BrowserRouter>
          <Switch>
            <Route exact path="/">
              <Notes />
              </Route>
              <Route path="/bancos">
                <Bancos />
              </Route>
          </Switch>
         </BrowserRouter>
        </div>
        </themeProvider>
      )
    }
};

export default App;

Answer 1

The issue shown in your screenshot is caused by a typo in this import:

import { createMuiTheme } from '@/mui/material/styles';

You have an extra '/' after '@'.

Note that createMuiTheme is deprecated so you'll likely want to use createTheme instead.

It also looks like you're using MUI v5 in which case, you'll want to import ThemeProvider from @mui/material/styles (MUI v5) instead of @material-ui/core/styles (Material-UI v4).

Some other minor issues:

• palette.secondary.main doesn't accept color objects
• fontWeigthLigth typo
• <themeProvider> typo

I suggest installing a linter or other tools that can easily identify issues like this.