2

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>
  );
}
NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
Nathan Schwermann
  • 31,285
  • 16
  • 80
  • 91

1 Answers1

2

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:

V5

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

V4

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

Related answer

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
  • Oh thank you! That was the issue, not sure how I managed to get two version of MUI I have been a react developer for about 30 minutes :) – Nathan Schwermann Oct 30 '21 at 04:30
  • @NathanSchwermann if you're creating a new project, you should use MUI v5 because there is a lot of breaking changes in the newer version. If you decide to update to v5 later, it can quickly become a chore because some breaking changes can't be automated by the codemod. – NearHuscarl Oct 30 '21 at 04:34
  • Thanks, yep I am updating it now. I hired someone to get me started and make a basic shell, sadly it seems I hired the wrong person for the job I'm basically having to redo everything they did at this point :/ I appreciate the help! – Nathan Schwermann Oct 30 '21 at 04:36