I am creating a theme using createMuiTheme():
import { createMuiTheme, responsiveFontSizes } from '#material-ui/core/styles';
const theme = responsiveFontSizes(
createMuiTheme({
palette: {
type: 'dark',
primary: {
main: '#c5cae9',
light: '#f8fdff',
dark: '#9499b7',
contrastText: '#212121',
},
secondary: {
main: '#5c6bc0',
light: '#8e99f3',
dark: '#26418f',
contrastText: '#ffffff',
},
},
typography: {
fontFamily: [
'Roboto',
'Arial',
'"Helvetica"',
'sans-serif',
].join(','),
},
}),
);
export default theme;
When looking at the default theme, I'm missing a lot of properties like breakpoints, direction, shadows, spacing, and etc.
Even when those properties are omitted, does createMuiTheme() provide default values that populate those fields? Or do I have to provide those values myself.
Take a look at createMuiTheme options signature
(Object): Takes an incomplete theme object and adds the missing parts.
So yes, your custom theme will be merged with MUI's default theme. See the docs here
const options = {palette:{/*such empty*/}}
export const theme = createMuiTheme(options)
Related
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 two themes, darkcustomtheme:
export const darkcustomTheme = createTheme({
palette: {
mode: 'dark',
primary: {
main: darkprimaryColor,
dark: grey[100],
light: grey[200],
},
secondary: {
main: darksecondaryColor,
},
info: {
main: darkinfoColor,
}
},
And the lightcustomTheme:
palette: {
mode: 'light',
primary: {
main: lightprimaryColor,
dark: orange[100],
light: orange[200],
},
secondary: {
main: lightsecondaryColor,
},
info: {
main: lightinfoColor,
},
},
Then I use the ThemeProvider to change the theme based on the state of a switch button:
<ThemeProvider theme={theme ? darkcustomTheme : lightcustomTheme}>
The problem is that I can't pass the variants dark and light on primary palette of the customTheme on a button. I'm thinking something like
<Button size="small" variant="extended" color="primary.dark">Warning</Button>
But this not work, I can't create a custom component to pass only in this button because I'm using two customTheme, so I strictly need to pass the property like color="primary.dark"
You must use this solution.
const theme = createMuiTheme({
palette: {
type: dark ? 'dark' : 'light',
},
})
and use:
<ThemeProvider theme={theme}>
for more information read Article:
easily toggle between light and dark theme with material ui
const theme = createMuiTheme({
palette: {
type: dark ? 'dark' : 'light',
primary: {
main: dark ? darkprimaryColor : lightprimaryColor,
dark: dark ? grey[100] : orange[100],
light: dark ? grey[200] : orange[200],
},
secondary: {
main: dark ? darksecondaryColor : lightsecondaryColor,
},
info: {
main: dark ? darkinfoColor : lightinfoColor,
}
},
})
I dont need to create the dark and light theme o primary palette, its automatic creates a set based on main color.
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 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;
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.