I'm currently attempting to modify the color of all the buttons in my project by overriding the theme CSS. Although I successfully changed the button color, the hover color remains transparent. Any suggestions on how to override this?
Are there any alternative methods to achieve this without having to add a class to each individual button?
Additionally, shouldn't all variations of a button adhere to the root CSS?
const theme = createMuiTheme({
palette: {
primary: {
light: '#35C37D',
main: '#35C37D',
dark: '#35C37D',
// contrastText: will be calculated to contrast with palette.primary.main
},
secondary: {
light: '#35C37D',
main: '#35C37D',
// dark: will be calculated from palette.secondary.main,
contrastText: '#35C37D',
},
// error: will use the default color
},
overrides: {
MuiButton: {
// Name of the rule
root: {
// Some CSS
background: 'rgba(53, 195, 125, 100)',
borderRadius: 0,
border: 0,
colorInherit: '#fff',
color: 'white',
height: 40,
padding: '0 30px',
boxShadow: '4px 9px 26px 0 rgba(16,124,71,0.10)'
},
textPrimary: {
color: '#fff',
},
textSecondary: {
color: '#fff',
},
contained: {
color: '#fff',
},
// Additional button variation styles
},
},
typography: {
fontFamily: 'azo-sans-web',
fontSize: 14,
fontWeightLight: 300,
fontWeightRegular: 400,
fontWeightMedium: 500,
htmlFontSize: 16,
},
});