I'm wanting to use material UI for a project. I see in the documentation that is possible to add a custom theme to change the colours of primary, secondary, etc.
Is it possible to do the same thing for other colours? For example, is it possible to create a theme for the grays used by material UI, without having to manually write custom css for each component?
you change it on theme file :
import { red } from '#material-ui/core/colors';
import { createTheme } from '#material-ui/core/styles';
// A custom theme for this app
const theme = createTheme({
overrides: {
MuiFormLabel: {
asterisk: {
color: '#db3131',
'&$error': {
color: '#db3131'
},
'&$warning': {
color: '#db3131'
},
}
}
},
colorMenu:'#fff',
palette: {
primary: {
main: '#009788',
},
gray: {
main: '#B1B6C0',
},
action: {
main: '#daa081',
},
secondary: {
main: '#db3131',
},
error: {
main: red.A400,
},
background: {
default: '#fff',
},
},
});
export default theme;
Related
I have an issue when I try to customise both the overall theme styling and the component styling at once in Material UI.
I started with the below which works perfectly:
import { createTheme } from '#mui/material/styles';
const theme = createTheme({
palette: {
brand: '#0D3B66',
primary: {
main: '#4AA1FF',
},
},
typography: {
// Changes to default 'typography'.
fontFamily: '"Mukta", sans-serif',
fontWeight: 400,
h1: {
fontSize: 24,
},
}
})
export default theme
Then I wanted to add the following override as well to change theme breakpoint. (This also works perfectly alone).
However, when I combine both like this:
import { createTheme } from '#mui/material/styles';
let theme = createTheme({});
theme = createTheme(theme, {
components: {
MuiContainer: {
styleOverrides: {
maxWidthLg: {
[theme.breakpoints.up('lg')]: {
maxWidth: 1280 // Your custom value here
},
}
}
}
}
})
export default theme
Hence, I tried to combine these to form this final block:
import { createTheme } from '#mui/material/styles';
let theme = createTheme({});
theme = createTheme(theme, {
components: {
MuiContainer: {
styleOverrides: {
maxWidthLg: {
[theme.breakpoints.up('lg')]: {
maxWidth: 1280 // Your custom value here
},
}
}
}
},
palette: {
brand: '#0D3B66',
primary: {
main: '#4AA1FF',
},
},
typography: {
// Changes to default 'typography'.
fontFamily: '"Mukta", sans-serif',
fontWeight: 400,
h1: {
fontSize: 24,
},
}
})
export default theme
...I no longer see the palette changes take effect when combined... Maybe palette and typography need to be handled separately or on a different level?
I'm not sure how to do this, so any advice appreciated!
This code works perfect for me:
import React from 'react';
import './App.css';
import { createTheme, ThemeProvider } from '#mui/material/styles';
import { Button, Container } from '#mui/material';
let theme = createTheme({});
theme = createTheme(theme, {
components: {
MuiContainer: {
styleOverrides: {
maxWidthLg: {
[theme.breakpoints.up('lg')]: {
maxWidth: 1280
},
}
}
}
},
palette: {
brand: '#0D3B66',
primary: {
main: '#4caf50',
},
},
typography: {
fontFamily: '"Mukta", sans-serif',
fontWeight: 400,
h1: {
fontSize: 24,
},
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<Container>
<Button>Primary</Button>
</Container>
</ThemeProvider>
);
}
export default App;
You can see the result:
I have a MUI theme setup and I would like to add an alpha color to MuiChip. I am not sure on how to access the specific color inside createTheme. For example, if my primaryColor is '#FF0000' and the secondary color is '#00ff00', just for MuiChip, I want to do backgroundColor: alpha(theme.palette, 0.1); If I pass a variant prop for the chip component, the backgroundColor should be changed to the alpha version of that variant.
export const theme = createTheme({
palette: {
primary: {
main: colors.primary,
},
secondary: {
main: colors.secondary,
},
error: {
main: colors.red,
},
},
components: {
MuiChip: {
styleOverrides: {
colorPrimary: {
color: 'white',
},
root: {
backgroundColor: alpha(theme.palette, 0.1)
}
},
},
},
});
Please advice.
As I can see your theme you misunderstood how MUI works with themes. I see this main problems:
If you use just MUI colors.primary is not valid. You must use exact color code like #fff. (not true if you use some kind of color lib)
in styleOverrides you must use the template from the doc here. With this you will get theme and ownerState to manipulate components on CSS level.
theme.palette is not the exact color reference you should use theme.palette.primary.main in alpha()
You can use alpha but I think opacity is easier
Just for information for other readers here we can find CSS reference of Chip component for Rule Names to override.
I made a working code on Codesandbox, you can try it.
Here is my theme to solve the problem:
export const theme = createTheme({
palette: {
primary: {
main: "#a0a"
},
secondary: {
main: "#0a0"
},
error: {
main: "#a00"
}
},
components: {
MuiChip: {
styleOverrides: {
root: {
color: "#0a0"
},
colorSuccess: ({ ownerState, theme }) => ({
...(ownerState.variant === "custom" && {
backgroundColor: alpha(theme.palette.primary.main, 0.3)
})
})
}
}
}
});
I have setup my theme as outlined in the docs.
palette: {
primary: {
main: customColor
}
}
When I hover, my mui button darkens based on the main color, but I want it to lighten based on the same color (without having to hard code a value anywhere). How can I achieve this?
Update:
Based on Prashant Jangam's answer I was able to get everything exactly as I needed it. See code below:
components: {
MuiButton: {
styleOverrides: {
root: ({ theme }) => ({
'&.MuiButton-containedPrimary:hover': {
backgroundColor: theme.palette.primary.light,
},
'&.MuiButton-containedSecondary:hover': {
backgroundColor: theme.palette.secondary.light,
},
}),
},
},
}
check the global component overide section for more details https://mui.com/customization/theme-components/#global-style-overrides
following code with give you start. here I have changed opacity on button hover state.
const theme = createTheme({
// your other theme settings here
components: {
MuiButton: {
styleOverrides: {
root: ({ ownerState }) => ({
'&:hover': {
opacity:0.5,
},
}),
},
},
},
});
I customize it like so:
const theme = createTheme({
get components() {
return {
MuiButton: {
styleOverrides: {
root: ({ ownerState }) => ({
'&:hover': {
backgroundColor: this.palette[ownerState.color].light,
transition: '0.2s',
},
}),
},
},
}
},
palette: {
primary: {
main: '#3E4BA0',
dark: '#313b7d',
light: '#5664bd',
},
},
})
At least on the version 4 of MUI the palette.primary.dark is the color that is used for hovering the button. Just replace the value of the dark property with the value that you want (hex color or rgb/rgba).
Note: It can also change some hovering colors on another components
const baseTheme = createMuiTheme({
palette: {
primary: {
main: '#4B882F',
dark: '#345F20', // <-------- rgba(75, 136, 47, 0.2)
light: '#6F9F58'
}
}
})
You can't use it like this because the baseTheme was not defined yet.
const baseTheme = createMuiTheme({
palette: {
primary: {
main: '#4B882F',
dark: baseTheme.palette.primary.light,
light: '#6F9F58'
}
}
})
I've been using this Material-UI Theme Creator tool to put together a MUI theme that I like:
mui-theme-creator
This tool is using Material UI version 4 I believe, while in my project I'm using #mui/material version 5.2.1, and I'm trying to figure out how I can "convert" the code from the theme-creator to a version compatible with version 5.
Now, here's the theme code from the Theme Creator:
import { ThemeOptions } from '#material-ui/core/styles/createMuiTheme'
export const themeOptions: ThemeOptions = {
palette: {
type: 'dark',
primary: {
main: '#ff3d00',
},
secondary: {
main: '#2962ff',
},
...........
props: { // Is there a way to do anything like this with Mui v5?
MuiAppBar: {
color: 'inherit',
},
},
overrides: {
MuiAppBar: {
colorInherit: {
backgroundColor: '#303030',
color: '#fff',
},
},
},
};
Screenshot of the AppBar using the above ThemeOptions code
Now, while I've done my best to try and convert this code to v5 and replicate it's effects, I'm having one main issue. This is the relevant code I've got so far:
import { createTheme } from '#mui/material/styles'
export const theme = createTheme({
mode: 'dark',
palette: {
primary: {
main: '#ff3d00',
},
secondary: {
main: '#2962ff',
},
..............
components: {
MuiAppBar: {
styleOverrides: {
colorPrimary: {
backgroundColor: '#303030',
color: '#ffffff',
},
},
},
},
})
The main issue I'm having is that, while the AppBar does change it's background color, I can't seem to find an option using createTheme that will change the color of the child elements inside the AppBar.
If there's no way to do it like in version 4 would it best if I just create a theme based on the main theme I've already created and use it solely for theming my Navbar component?
Your migrated style is missing props, In MUI5 you have to provide props like this
components: {
MuiAppBar: {
styleOverrides: {
colorInherit: {
backgroundColor: "#32302F",
},
},
defaultProps: {
color: "inherit",
},
},
},
I'm writing a React application using Material UI. I have the following global theme file:
import { createMuiTheme } from '#material-ui/core/styles';
import createBreakepoints from '#material-ui/core/styles/createBreakpoints';
import '../../index.css';
const font = "'Ubuntu', sans-serif";
const breakpoints = createBreakepoints({});
const theme = createMuiTheme({
palette: {
primary: {
main: '#3a2d96',
},
secondary: {
main: '#ff7b7d',
},
text: {
primary: 'white',
secondary: 'black',
},
grey: {
A100: '#988d8b',
A200: '#3f3f46',
},
},
typography: {
fontFamily: font,
[breakpoints.up('md')]: {
fontSize: 6,
},
[breakpoints.up('sm')]: {
fontSize: 4,
},
},
});
export default theme;
The breakpoints aren't applied.
I'm trying to change the fontSize property on the global theme file so that any typography component in my app will have this rule.