Why is the custom palette ignored in MUI?-CodePudding

Using MUI 4.12 and I have set the type to dark and used CssBaseline which was the solution I have seen for other answers but still it seems the type is completely ignored.

import {React, Fragment} from 'react'
import {
    createTheme, 
    ThemeProvider,
    makeStyles, 
    Zoom, 
    Fab,
    useScrollTrigger,
    Box, 
    CircularProgress
  } from "@material-ui/core";
import CssBaseline from '@mui/material/CssBaseline';
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";

import "./App.css";
import Footer from "./Components/Footer/footer";
import { AppRouter } from "./Router/Router";

const theme = createTheme({
  palette: {
    type: "dark",
    primary: {
      main: "#d32f2f",
    },
    secondary: {
      main: "#ef5350",
    },
    inherit: {
      main: "white",
    },
  },
  overrides : {
    MuiTab : {
      textColorInherit : {
        opacity :1,
      }
    }
  }
});

function App(props) {
  return (
    <Fragment>
      
      <div className="App">
        <Box id="back-to-top-anchor" />
        <ThemeProvider theme={theme}>
        <CssBaseline/>
          <AppRouter />
          <ScrollTop {...props}>
            <Fab color="primary" size="small" aria-label="scroll back to top">
              <KeyboardArrowUpIcon />
            </Fab>
          </ScrollTop>
        </ThemeProvider>
      </div>
      <Footer />
    </Fragment>
  );
}

CodePudding user response：

You're importing CssBaseline from @mui/material which is the package for MUI v5. In v5, MUI uses emotion instead of JSS (different style library internally), so your code doesn't work. You need to import the components from the same version to fix the problem:

import { createTheme, ThemeProvider, CssBaseline, ... } from '@mui/material';

import { createTheme, ThemeProvider, CssBaseline, ... } from '@material-ui/core';

Related answer