I am trying to style buttons in a custom MUI theme however, when I try to incorporate components into my code I get the following error:
This is strange to me because I am directly following the documentation here but still getting this error.
- I can't tell what I might be doing wrong below is the code I am currently working with, did I forget to import something?
import { createTheme } from '@mui/material/styles';
const theme = createTheme({
palette: {
primary: {
light: '#6826FB',
main: '#6826FB',
dark: '#CDBDFF',
},
secondary: {
light: '#625883',
main: '#615B71',
dark: '#CCC0F1',
contrastText: '#ffcc00', //not sure
},
contrastThreshold: 3,
tonalOffset: 0.2,
},
typography: {
subtitle1: {
fontSize: 12,
},
body1: {
fontWeight: 500,
},
button: {
fontFamily: 'Roboto',
fontSize: '12px',
fontStyle: 'SemiBold',
},
},
components: {
MuiButton: {
styleOverrides: {
root: {
fontSize: '0.75',
background: '#5B00EF',
borderRadius: '4px',
},
},
},
});
- Is this the best way to do this? I found another way to apply styling to components in the code base which I can refer to below but it believe it might be deprecated? What is the difference between Overides and StyleOverides?
const theme = createTheme({
palette: {
primary: {
light: "rgb(234, 227, 243)",
main: "#5B00EF",
},
secondary: {
main: "#1C1B1F",
},
},
overrides: {
MuiButton: {
root: {
textTransform: "capitalize",
fontSize: 12,
lineHeight: "14px",
fontWeight: 600,
},
},
},
});
I tried changing styleOverides (even though this is what the documentation in react suggests) and tried to instead use overrides and this removed the issue but I feel as though I am confused why the documentation suggests one way versus the other unless this way is deprecated? Is the documentation not up to date?