I've created a theme in my App.js which overrides the Primary and Secondary color. I have ThemeProvider wrapping a Home component. The overridden values are not showing up in the Home component. What am I doing wrong?
App.js
import React from 'react'
import { ThemeProvider, createMuiTheme } from '#material-ui/core/styles'
import purple from '#material-ui/core/colors/purple'
import green from '#material-ui/core/colors/green'
import Home from './components/Home'
const theme = createMuiTheme({
overrides: {
pallete: {
primary: {
main: purple[500]
},
secondary: {
main: green[500]
}
}
}
})
const App = () => {
return (
<ThemeProvider theme={theme}>
<Home />
</ThemeProvider>
)
}
export default App
Home.js
import React from 'react'
import { useTheme } from '#material-ui/core/styles'
import { Container, Grid, AppBar, Toolbar, CssBaseline } from '#material-ui/core'
const Home = () => {
const theme = useTheme()
return (
<Container max="lg">
<CssBaseline />
<Grid container>
<Grid item xs={12}>
<AppBar color="primary">
<Toolbar>
Hello World
</Toolbar>
</AppBar>
</Grid>
</Grid >
</Container >
)
}
export default Home
I would think that in my AppBar the color="primary" should show up with the overridden primary color. But it's not happening.
You've got some typo (like pallete instead of palette, redundant overrides prop etc).
Here a working example.
Related
Just as the title says. Not sure what's wrong exactly, and would love to learn what I'm doing that's making this not work. I tested the import to see if it works through the web console, and it does, so I'm doing something wrong with createTheme. Here's my code:
import React from 'react';
import AppBar from '../components/appbar';
import { Typography } from '#mui/material'
import Footer from '../components/footer';
import { ThemeProvider, createTheme } from "#mui/material/styles";
const theme = createTheme({
typography: {
fontFamily: [
'Press Start 2P',
'cursive',
].join(','),
},});
const Home = props => {
return (
<div>
<AppBar title="Home" />
<ThemeProvider theme={theme}>
<Typography variant="h2">
Hello World!
</Typography>
</ThemeProvider>
<Footer />
</div>
);
}
export default Home;
Any help is thoroughly appreciated. Thank you very much for your time.
I want to customize my appbar size on react Mui(currently using v4, but I get an error everytime I try to create a style.
My current Code
import React from "react";
import { AppBar, Toolbar, Typography, Box, makeStyles } from '#material-ui/core';
import { Link } from "react-router-dom";
import './Navbar.css'
const styles ={
customizeToolbar: {
minHeight: 36
}
};
function Navbar(){
return(
<AppBar position='sticky' >
<Toolbar variant='dense' style={classes.customizeToolbar} >
</Toolbar>
</AppBar>
)
}
export default Navbar;
import React from "react";
import { AppBar, Toolbar, Typography, Box, makeStyles } from '#material-ui/core';
import { Link } from "react-router-dom";
import './Navbar.css'
const styles ={
customizeToolbar: {
minHeight: 36
}
};
function Navbar(){
return(
<AppBar position='sticky' >
<Toolbar variant='dense' style={styles.customizeToolbar} >
</Toolbar>
</AppBar>
)
}
export default Navbar;
If you wish to customize the theme, you need to use the ThemeProvider component in order to inject a theme into your application. You must create styles with makeStyles, then you can create variable classes and use it in jsx with className not style. If you want customize not only Navbar but all components you can set ThemeProvider in index.js
import { createTheme, ThemeProvider } from '#mui/material/styles';
import { createStyles, makeStyles } from '#mui/styles';
const useStyles = makeStyles(() =>
createStyles({
customizeToolbar: {
minHeight: 36
}
})
);
const theme = createTheme();
function Navbar(){
const classes = useStyles();
return(
<ThemeProvider theme={theme}>
<AppBar position='sticky' >
<Toolbar variant='dense' className={classes.customizeToolbar} >
</Toolbar>
</AppBar>
</ThemeProvider>
)
}
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>
);
}
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
Material UI Dark Mode
I tried theming MUI AppBar but I have no idea about theming.
Can I style an AppBar with theme without using styled component or other style api?
palette.js
import { createTheme } from '#mui/material/styles';
const theme = createTheme({
palette: {
primary: {
main: "#000F04"
}
}
});
App.js
import theme from "../../styles/palette";
import { ThemeProvider } from '#mui/material/styles';
const App = () => {
return (
<ThemeProvider theme={theme}>
<AppBar position="static" color="primary">
<Toolbar>
</Toolbar>
</AppBar>
</ThemeProvider>
)
}
Your codesandbox work.
Use the sx props if you need to add specific style. https://mui.com/system/the-sx-prop/
You can too overide style on the theme: https://mui.com/customization/theme-components/#heading-global-style-overrides
I want to pallete of the theme for my next.js app.
I'm very new to next.js so please be kind. I can give more info if something specific is required.
This is my index.js
import Navbar from "../src/components/navbar";
import Frontpage from "../src/components/frontpage ";
import { Grid, ThemeProvider, createMuiTheme } from "#material-ui/core";
const theme = createMuiTheme({
pallete: {
primary: {
main: '#abcdef',
}
}
})
function Index() {
return (
<ThemeProvider theme={theme}>
<Grid container justify="center" style={{ scrollBehavior: "smooth" }}>
<Grid item xs={9}>
<Navbar />
<Frontpage />
</Grid>
</Grid>
</ThemeProvider>
);
}
export default Index;
This is my Frontpage.js
import Grid from "#material-ui/core/Grid";
import { Button } from "#material-ui/core";
import styles from "../styles/_homeview.module.scss";
const Frontpage = () => {
return (
<>
<Grid item className={styles.homehead}>
Heading 1
</Grid>
<Grid item xs={6} className={styles.homeTagLine}>
lorem ipsum for, lets say around 30 words
</Grid>
<Button variant="contained" color="primary">
Contact Us
</Button>
</>
);
};
export default Frontpage;
Here I expect the button to be of color specified in the theme (#abcdef) but its the default Material UI theme color.
How can I fix (apply/modify) the default Material UI theme?
There is a typo - palette not pallete in your example!
const theme = createMuiTheme({
palette: {
primary: {
main: '#abcdef',
}
}
})