I am new to MUI, but all was pretty easy to understand beside changing to dark theme.
I opened documentation of MUI at page where there are examples with dark theme. I copied the first example and it didn't work to me. Why doesn't this simple code example change my MUI theme to 'dark' mode? from here I understood that I need to add more components, but I didn't really understand what does it mean. If I don't add DOM tree it doesn't work? Why the background doesn't change?!
import React from 'react';
import { ThemeProvider, createTheme } from '#mui/material/styles';
function App() {
const darkTheme = createTheme({
palette: {
mode: 'dark'
},
});
return (
<ThemeProvider theme={darkTheme}>
Hello World
</ThemeProvider>
);
}
export default App;
You shoul add <CssBaseline />
import React from 'react';
import { ThemeProvider, createTheme } from '#mui/material/styles';
function App() {
const darkTheme = createTheme({
palette: {
mode: 'dark'
},
});
return (
<ThemeProvider theme={darkTheme}>
<CssBaseline />
Hello World
</ThemeProvider>
);
}
export default App;
I am using Typescript, React. Material-UI (now MUI) and Webpack.
I am trying to apply a theme using material-ui's ThemeProvider but it only seems to apply that theme to components that are not from the material-ui library.
import React from 'react'
import { ThemeProvider, CssBaseline } from '#material-ui/core'
import { createTheme } from '#material-ui/core/styles'
import Router from './components/Router'
import NavBar from './components/NavBar'
import Toolbar from '#mui/material/Toolbar'
import Container from '#mui/material/Container'
export function App(): JSX.Element {
const theme = createTheme({
palette: {
type: 'dark',
primary: {
main: '#ffeb3b',
},
secondary: {
main: '#795548',
},
},
})
return (
<ThemeProvider theme={theme}>
<NavBar />
<Toolbar />
<Container>
<Router />
</Container>
<CssBaseline />
</ThemeProvider>
)
}
The I can see darkmode being toggled so long as the backdrop for the app is not a MUI paper element. Also my AppBar contained within my NavBar component does not change color when I change the palette main colors.
Putting the theme into a different file does not help. And I have already run Yarn upgrade so everything should be up to date. What is going on?
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.
I am trying to look for documentation or code example how can I specify addition colors in Material UI theme.
Right now I have following theme configuration
const theme = createMuiTheme({
palette: {
primary: {
main: "#B31728"
},
secondary: {
main: "#202833"
}
},
...
Now I have a case where I want to use a color for successful operations such as
import { green } from "#material-ui/core/colors";
<Fragment>
{isVerified ? (
<VerifiedUser style={{ color: green[500] }} />
) : (
<Error color="primary" />
)}
</Fragment>
I want to set the color of VerifiedUser Icon in the same way it is set for Error Icon. But the theme palette configuration only has primary and secondary intentions. How can I set a color lets say "success" so that I can be able to pass it like
<VerifiedUser color="success" />
For Material-UI, you can only assign inherit primary secondary default to color, you can customize primary and secondary through createMuiTheme.
To apply your custom theme into component, use MuiThemeProvider :
<MuiThemeProvider theme={theme}>
//your component
</MuiThemeProvider>
Therefore, if you want to generate green theme component, you can create a theme, then use MuiThemeProvider to wrap your component.
Code sample(generate green button):
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
const theme = createMuiTheme({
palette: {
primary: { main: '#00FF00' }
});
function GreenButton() {
return (
<MuiThemeProvider theme={theme}>
<Button color="primary">This is green button</Button>
</MuiThemeProvider>
);
}
Further reading: Customize Material-UI with your theme
I have a react app using MUI. When you import a button, you can set its style using primary={true} or secondary={true}. I want to change the primary and secondary colors. I found out that I can do that this way:
const theme = createMuiTheme({
palette: {
primary: '#00bcd4',
secondary: '#ff4081'
}
});
and then here I can use it:
<MuiThemeProvider theme={theme}>
<App/>
</MuiThemeProvider>
But I got an error: createMuiTheme is not a function...
I went into the MUI package and found out that there is not such file and when I import createMuiTheme, I get undefined. It's supposed to be imported from material-ui/styles/theme but it actually doesn't have this folder at all!
I was using material-ui#0.19.4. I updated this package to v20 and there is still no such folder anyway.
New Answer
With the latest version of Material UI, createMuiTheme is deprecated now. Hence, instead of that we should use createTheme
import React from 'react';
import { render } from 'react-dom';
import { MuiThemeProvider, createTheme } from '#material-ui/core/styles';
import Root from './Root';
// use default theme
// const theme = createTheme();
// Or Create your Own theme:
const theme = createTheme({
palette: {
secondary: {
main: '#E33E7F'
}
}
});
function App() {
return (
<MuiThemeProvider theme={theme}>
<Root />
</MuiThemeProvider>
);
}
render(<App />, document.querySelector('#app'));
Old answer
From https://material-ui.com/customization/themes/:
import React from 'react';
import { render } from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
import Root from './Root';
// use default theme
// const theme = createMuiTheme();
// Or Create your Own theme:
const theme = createMuiTheme({
palette: {
secondary: {
main: '#E33E7F'
}
}
});
function App() {
return (
<MuiThemeProvider theme={theme}>
<Root />
</MuiThemeProvider>
);
}
render(<App />, document.querySelector('#app'));
The two diferrences with the documentation i noticed is the name of the prop for the MuiThemeProvider:
<MuiThemeProvider muiTheme={muiTheme}>
<AppBar title="My AppBar" />
</MuiThemeProvider>
And the function is not createMuiTheme but getMuiTheme:
import getMuiTheme from 'material-ui/styles/getMuiTheme';
Update:
If you open the light theme from the package, they are not using primary or secondary, maybe you should try like that?
You should be using v1-beta as the docs recommend. I had these issues myself and realised that I was using an outdated version of MUI.
npm install material-ui#next
Import:
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
Create your theme:
const theme = createMuiTheme({
palette: {
secondary: {
main: '#d32f2f'
}
},
});
Apply it to your button:
<MuiThemeProvider theme={theme}>
<Button
onClick={this.someMethod}
variant="raised"
color="secondary"
</Button>
</MuiThemeProvider>
Usually if you get any import issues regarding MUI, then it's almost every time some version problem.
If you want to use a custom color, put it in the main property of an object. MUI will use that color to calculate the dark, light and contrastText values besides the main one.
dark, light: a darker and lighter versions of the main color.
contrastText: the color of the text if the background color is the main color.
The example below:
const theme = createTheme({
palette: {
primary: {
main: '#ff0000', // very red
},
secondary: {
main: '#00fff0', // very cyan
},
},
});
Generates the following color properties in the primary and secondary object:
const theme = useTheme();
const { main, dark, light, contrastText } = theme.palette.primary;
// same with secondary
// const { main, dark, light, contrastText } = theme.palette.secondary;
You can also use MUI colors by passing the color object directly to primary or secondary property. This time, MUI uses the property 500 (for example amber[500]) to calculate 3 other colors. The code below:
import { amber, deepPurple } from '#mui/material/colors';
const theme = createTheme({
palette: {
primary: amber,
secondary: deepPurple,
},
});
Generates the following color properties in the primary and secondary object, Note that because you pass the whole color, all other shades from 50 to A700 are also available as a small side-effect:
Live Demo
Related Answers
How to add custom MUI palette colors
Material-UI: how to access all palette shades inside component
The new API for MUI Material v5 is described in https://mui.com/material-ui/customization/theming/.
import * as React from 'react';
import { red } from '#mui/material/colors';
import { ThemeProvider, createTheme } from '#mui/material/styles';
const theme = createTheme({
palette: {
primary: {
main: red[500],
},
},
});
const App = () =>
<ThemeProvider theme={theme}>...</ThemeProvider>;