'How to get Material-UI V5 to auto-generate :hover colors in custom color objects for buttons
I'm using MUI v5 (latest) to specify custom colors for use in my theme provider. However, I've noticed that there's no hover state color change. Is there a specific value I need to add to main to get it to auto generate the hues/colors? From my memory, it auto-generated hover states on custom colors. What do I need to do?
My theme file:
import { createTheme, responsiveFontSizes } from "@material-ui/core"
let theme = createTheme({
typography: {
palette: {
sand: {
main: '#f3d3bd'
}
},
thin: {
fontFamily: 'Helvetica',
fontWeight: 100,
fontStyle: 'sans-serif',
},
fontFamily: [
'Roboto',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'"Helvetica Neue"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
},
palette: {
primary: {
main: '#0277bd',
},
secondary: {
main: '#b2ff59',
},
darkGray: {
main: '#333333'
},
lightGray: {
main: '#5e5e5e'
},
amber: {
main: '#f96225',
},
turquoise: {
main: '#48e5c2'
},
sand: {
main: '#f3d3bd'
},
offWhite: {
main: '#fcfaf9'
}
},
})
theme = responsiveFontSizes(theme)
export default theme
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
