How to get Material-UI V5 to auto-generate :hover colors in custom color objects for buttons

user_6398263 0
Viewed 704

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
material-ui reactjs
1 Answers

Material-UI does not automatically augment custom colors that you add to the palette with light and dark variations, but it does augment the standard colors. These light and dark variations are used for some hover effects such as contained Button.

You can use the augmentColor function in theme.palette to add generated versions of the light and dark variations to your color (or specify them explicitly):

import { ThemeProvider, createTheme } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const defaultTheme = createTheme();
const theme = createTheme({
  palette: {
    green: defaultTheme.palette.augmentColor({
      color: { main: "#00ff00" },
      name: "green"
    })
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" color="green">
        Hello
      </Button>
    </ThemeProvider>
  );
}

Edit augment custom color

Related answer: Merge Material UI themes

user_74959300
Related