Develop Reference

MUI createTheme is not properly passing theme to MUI components

I have created a theme in the index of my React.JS project using MUI. When I try to apply my style to my Appbar the theme does not correctly modify the menu button nor the menu itself. the button looks generic default and the menu remains white when it should match the color of the Appbar itself.
My index.tsx looks as such:
import React from "react";
import ReactDOM from "react-dom";
import AppbarTop from "./AppbarTop";
import { Router } from "react-router";
import { createBrowserHistory } from "history";
import AdapterDateFns from "#mui/lab/AdapterDateFns";
import { LocalizationProvider } from "#mui/lab";
import { createTheme } from "#mui/material";
import { ThemeProvider } from "#mui/styles";
import { StyledEngineProvider } from "#mui/material/styles";
const customHistory = createBrowserHistory();
const theme = createTheme({
palette: {
primary: {
main: "#242526"
},
secondary: {
main: "#d975d0"
},
text: {
primary: "#E4E6EB",
secondary: "#B0B3B8"
},
background: {
default: "#242526",
paper: "#242526"
}
}
});
ReactDOM.render(
<React.StrictMode>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Router history={customHistory}>
<ThemeProvider theme={theme}>
<StyledEngineProvider injectFirst>
<AppbarTop />
</StyledEngineProvider>
</ThemeProvider>
</Router>
</LocalizationProvider>
</React.StrictMode>,
document.getElementById("root")
);
My appbar.tsx looks like this:
import React from "react";
import {
AppBar,
Box,
Button,
Container,
Menu,
MenuItem,
Toolbar
} from "#mui/material";
import HomeIcon from "#mui/icons-material/Home";
import { makeStyles } from "#mui/styles";
const useStyles = makeStyles((theme?: any) => ({
appBar: {
background: theme.palette.primary.main,
height: "60px",
position: "relative"
}
}));
const AppbarTop: React.FC<{ [key: string]: any }> = () => {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState<any>(null);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<>
<AppBar position="static" className={classes.appBar}>
<Toolbar>
<Button
id="basic-button"
aria-controls="basic-menu"
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={handleClick}
>
Dashboard
</Button>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
"aria-labelledby": "basic-button"
}}
>
<MenuItem onClick={handleClose}>
<HomeIcon />{" "}
</MenuItem>
</Menu>
{/*test speed dial*/}
<Container maxWidth="sm"></Container>
<Box></Box>
</Toolbar>
</AppBar>
</>
);
};
export default AppbarTop;
Can someone please explain what I am missing?

Change this line:
import { ThemeProvider } from "#mui/styles";
To:
import { ThemeProvider } from "#mui/material/styles";
Reason: There are 2 ThemeProviders here
The one from #mui/styles: This ThemeProvider does send the Theme object down via context, it works fine, you can still access it using the useTheme hook:
const theme = useTheme();
return <Box sx={{ width: 10, height: 10, bgcolor: theme.palette.primary.main }} />
The one from #mui/material/styles: This ThemeProvider is a wrapper of the above, but it also injects the theme to the StyledEngineThemeContext.Provider, which allows you to access the theme when using MUI API (sx prop/styled()). The problem here is that the Button and Menu components uses the styled() API under-the-hood so the ThemeProvider needs to be imported from #mui/material/styles to make it work.
return <Box sx={{ width: 10, height: 10, bgcolor: 'primary.main' }} />
Related answers
Difference between #mui/material/styles and #mui/styles?
Cannot use palette colors from MUI theme
MUI - makeStyles - Cannot read properties of undefined
Material UI Dark Mode

Material UI - Theme Style - typography not working

I'm trying to apply typography changes to the theme using Material UI. But object changes are not working. However, the palette is working.
I tried to make some changes to the H3 variation and also to the default font size, but none of the changes work.
However, the colors on the palette work.
App.js
import React from "react";
import "./App.css";
import Header from "./components/ui/Header";
import { ThemeProvider } from "#material-ui/styles";
import theme from "./components/ui/Theme";
function App() {
return (
<ThemeProvider theme={theme}>
<Header />
</ThemeProvider>
);
}
export default App;
Header/index.jsx
import React from "react";
import AppBar from "#mui/material/AppBar";
import Toolbar from "#mui/material/Toolbar";
import useScrollTrigger from "#mui/material/useScrollTrigger";
import Typography from "#mui/material/Typography";
function ElevationScroll(props) {
const { children, window } = props;
const trigger = useScrollTrigger({
disableHysteresis: true,
threshold: 0,
target: window ? window() : undefined,
});
return React.cloneElement(children, {
elevation: trigger ? 10 : 0,
});
}
function Header() {
return (
<ElevationScroll>
<AppBar color="primary">
<Toolbar>
<Typography variant="h3" component="h3">
Nome de teste
</Typography>
<h3>Teste</h3>
Teste
</Toolbar>
</AppBar>
</ElevationScroll>
);
}
export default Header;
Theme.js
import { createTheme } from "#material-ui/core/styles";
const arcBlue = "#0B72B9";
const arcOrange = "#FFBA60";
export default createTheme({
typography: {
fontSize: 60,
h3: {
fontWeight: 500,
},
},
palette: {
common: {
blue: `${arcBlue}`,
orange: `${arcOrange}`,
},
primary: {
main: `${arcBlue}`,
},
secondary: {
main: `${arcOrange}`,
},
},
});
If anyone can help, I would be very grateful.

Solution
I was importing from:
import { ThemeProvider } from "#material-ui/styles";
However, according to the documentation, it needs to be:
import { ThemeProvider } from "#mui/material/styles";

material-ui : enable the dark mode automatically

As per the documentation:
It says dark mode theme will be generated automatically and get reflected in UI, but it is not working for me.
Dependencies:
"#emotion/styled": "^11.0.0",
"#material-ui/core": "^5.0.0-alpha.16",
"#material-ui/icons": "^5.0.0-alpha.15",
"#material-ui/lab": "^5.0.0-alpha.16",
Code:
import { createMuiTheme } from "#material-ui/core/styles";
import { CssBaseline, ThemeProvider, useMediaQuery } from "#material-ui/core";
import { green, purple } from "#material-ui/core/colors";
import { useEffect, useMemo } from "react";
import { Route, Switch, useHistory } from "react-router-dom";
import SignIn from "./ui/auth/SignIn.js";
import SignUp from "./ui/auth/SignUp.js";
import Welcome from "./ui/auth/Welcome.js";
import { log } from "./util/logger.js";
const App = () => {
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const theme = useMemo(
() => {
log(prefersDarkMode, "Dark Mode");
const themeOptions = {
palette: {
type: prefersDarkMode ? 'dark' : 'light',
primary: purple,
secondary: green
},
}
log(JSON.stringify(themeOptions), "Theme Option")
const theme = createMuiTheme(themeOptions);
log(theme, "Theme");
return theme;
},
[prefersDarkMode],
);
const history = useHistory()
useEffect(() => {
const timer = setTimeout(() => {
history.push("/signin");
}, 3000);
return function cleanup() {
clearTimeout(timer);
};
});
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Switch>
<Route path="/" component={Welcome} exact />
<Route path="/signin" component={SignIn} />
<Route path="/signup" component={SignUp} />
</Switch>
</ThemeProvider>
);
}
export default App;
Signup.js
import React, { useState } from 'react';
import Avatar from '#material-ui/core/Avatar';
import Button from '#material-ui/core/Button';
import TextField from '#material-ui/core/TextField';
import FormControlLabel from '#material-ui/core/FormControlLabel';
import Checkbox from '#material-ui/core/Checkbox';
import Link from '#material-ui/core/Link';
import Grid from '#material-ui/core/Grid';
import Box from '#material-ui/core/Box';
import LockOutlinedIcon from '#material-ui/icons/LockOutlined';
import Typography from '#material-ui/core/Typography';
import { makeStyles } from '#material-ui/core/styles';
import Container from '#material-ui/core/Container';
import ForgotPassword from './ForgotPassword';
import { useHistory } from 'react-router-dom';
const Copyright = () => {
return (
<Typography variant="body2" color="textSecondary" align="center">
{'Copyright © '}
<Link color="inherit" href="https://material-ui.com/">
Your Website
</Link>
{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
background: theme.palette.background.default
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
const SignIn = () => {
const classes = useStyles();
const history = useHistory();
// Forgot Password State
const [open, setOpen] = useState(false);
function openForgotPassword(event) {
event.preventDefault();
setOpen(true);
}
function onClose() {
setOpen(false);
}
function goToSignUp(event) {
event.preventDefault();
history.push('/signup');
}
return (
<Container component="main" maxWidth="xs">
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form} noValidate>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link href="#" onClick={openForgotPassword} variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="#" onClick={goToSignUp} variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</form>
</div>
<Box mt={8}>
<Copyright />
</Box>
<ForgotPassword open={open} onClose={onClose} />
</Container>
);
}
export default SignIn;
Background is not getting dark with the type. Can someone help with this?

My bad. The latest version of Material UI now uses mode attribute of palette to determine whether dark mode or not. Simply change from 'type' to 'mode':
// Enabling Dark Mode according to system-wide setting
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const theme = useMemo(
() => createMuiTheme({
palette: {
mode: prefersDarkMode ? 'dark' : 'light',
primary: purple,
secondary: green
},
}),
[prefersDarkMode],
);
Complete code of App.js:
import { createMuiTheme, CssBaseline, ThemeProvider, useMediaQuery } from "#material-ui/core";
import { green, purple } from "#material-ui/core/colors";
import { useEffect, useMemo } from "react";
import { Route, Switch, useHistory } from "react-router-dom";
import SignIn from "./ui/auth/SignIn.js";
import SignUp from "./ui/auth/SignUp.js";
import Welcome from "./ui/auth/Welcome.js";
const App = () => {
// Enabling Dark Mode according to system-wide setting
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const theme = useMemo(
() => createMuiTheme({
palette: {
mode: prefersDarkMode ? 'dark' : 'light',
primary: purple,
secondary: green
},
}),
[prefersDarkMode],
);
const history = useHistory()
useEffect(() => {
// After displaying Welcome screen for 3 seconds
// go to SignIn page
const timer = setTimeout(() => {
history.push("/signin");
}, 3000);
return function cleanup() {
clearTimeout(timer);
};
});
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Switch>
<Route path="/" component={Welcome} exact />
<Route path="/signin" component={SignIn} />
<Route path="/signup" component={SignUp} />
</Switch>
</ThemeProvider>
);
}
export default App;

With the newer version of Material UI, you need to use createTheme and not createMuiTheme
https://material-ui.com/customization/palette/#user-preference
import React from 'react';
import useMediaQuery from '#material-ui/core/useMediaQuery';
import { createTheme, ThemeProvider } from '#material-ui/core/styles';
import CssBaseline from '#material-ui/core/CssBaseline';
function App() {
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const theme = React.useMemo(
() =>
createTheme({
palette: {
type: prefersDarkMode ? 'dark' : 'light',
},
}),
[prefersDarkMode],
);
return (
<ThemeProvider theme={theme}>
<CssBaseline/>
<Routes />
</ThemeProvider>
);
}

Drawer is overlapping Navbar in react material ui app, do you know how to change?

I want to let the drawer disappear behind my navbar when it is opened. Currently, the drawer is overlaying the navbar. I tried to change it with z-index in my "styles" but apparently it does not work (see screenshot). I set the z-index for the navbar higher than for the drawer.
Can you identify my mistake?
Here is the drawer.js:
import React from "react";
import clsx from "clsx";
import { makeStyles, useTheme } from "#material-ui/core/styles";
import Drawer from "#material-ui/core/Drawer";
const drawerWidth = 240;
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
},
drawer: {
width: drawerWidth,
zIndex: 400,
flexShrink: 0,
/*whiteSpace: "nowrap",*/
},
drawerOpen: {
width: drawerWidth,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
And here is my navbar.js:
// import packages
import React, { useContext, Fragment } from "react";
import { Link } from "react-router-dom";
// import local dependenceis
import Logo from "./images/tubot_logo.png";
import AuthContext from "../../Context/Auth/authContext";
// import material-ui
import withStyles from "#material-ui/core/styles/withStyles";
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import Typography from "#material-ui/core/Typography";
// styling
const styles = (theme) => {
return {
root: {
flexGrow: 1,
zIndex: 2000,
},
title: {
flexGrow: 1,
fontFamily: "shadowsintolight",
textDecoration: "none",
color: "black",
},
};
const Navbar = (props) => {
// destructuring: styling props
const {
root,
title,
} = props.classes;
// react: return jsx
return (
<div className={root}>
<AppBar position="absolute" >
<Toolbar>
/*some navbar stuff*/
</Toolbar>
</AppBar>
</div>
);
};

Try setting the classes prop on your Drawer component like this:
const App = () => {
const classes = useStyles();
return (
<div className="App" className={root}>
<AppBar position="absolute">
<Toolbar>
// Toolbar content...
</Toolbar>
</AppBar>
<Drawer
variant="persistent"
anchor="left"
open={true}
classes={{
paper: classes.drawer,
}}>
// Drawer content...
</Drawer>
</div>
);
};

Why isn't the darkBaseTheme for material-ui applied?

import React from 'react';
import ReactDOM from 'react-dom';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import {Tabs, Tab} from 'material-ui/Tabs';
const styles = {
headline: {
fontSize: 24,
paddingTop: 16,
marginBottom: 12,
fontWeight: 400,
},
};
const LoginTabs = () => (
<Tabs>
<Tab label="Login" >
<div>
<h2 style = {styles.headline}>Login</h2>
<p>
This is an example tab.
</p>
<p>
You can put any sort of HTML or react component in here. It even keeps the component state!
</p>
</div>
</Tab>
<Tab label="Sign Up" >
<div>
<h2 style = {styles.headline}>Sign Up</h2>
<p>
This is another example tab.
</p>
</div>
</Tab>
</Tabs>
);
class LoginApp extends React.Component {
constructor () {
super();
this.muiTheme = darkBaseTheme;
}
componentWillMount () {
console.log(this.muiTheme);
}
render() {
return(
<div>
{LoginTabs()}
</div>
)
}
}
const Main = () => (
<MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
<LoginApp />
</MuiThemeProvider>
);
// ========================================
ReactDOM.render(
<Main />,
document.getElementById('root')
);
The tabs are rendered with the default light theme even though I've specified that darktheme using muiThemeProvider.
Most of this code is copied from the material-ui website and I'm not sure what is wrong. Can anybody suggest a fix?
I think the palette is being overwritten at some point, but I'm not sure where.

You can place the MuiThemeProvider at the root - it is not required on all components.
You can make the theme dark by setting type to dark. While it's only a single property value change, internally it modifies the value of the following keys:
palette.text
palette.divider
palette.background
palette.action
The theme can be set up this way.
import CssBaseline from '#material-ui/core/CssBaseline';
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
import { Provider } from 'react-redux';
const theme = createMuiTheme({
palette: {
type: 'dark',
},
});
export default function component(props) {
return (
<MuiThemeProvider theme={theme}>
<div>
<CssBaseline />
<Header />
<AppBody />
</div>
</MuiThemeProvider>
);
}
https://material-ui.com/customization/themes/#type-light-dark-theme-