Using MUI 5, I'm trying to get a button to have the hover/unhovered background-color to be set by data bound to the react component, namely data.buttonColor and data.buttonHoverColor.

Currently the button component is defined and used like this, which makes the unhovered color red and the hovered color the secondary color for the theme.

export const ButtonSlider = styled(Button)(
({  }) => `
    background-color: red;
`
);

<ButtonSlider 
    color='secondary'
    variant="contained">
    {data.buttonText}
</ButtonSlider>

I've found that setting the sx property like this will change the unhovered color to whatever is in data.buttonColor:

<ButtonSlider
    sx={{backgroundColor: data.buttonColor}}
    color='secondary'
    variant="contained">
    {data.buttonText}
</ButtonSlider>

But I can't figure out how to change the hovered color to data.buttonHoverColor.

Using MUI 5, I'm trying to get a button to have the hover/unhovered background-color to be set by data bound to the react component, namely data.buttonColor and data.buttonHoverColor.

Currently the button component is defined and used like this, which makes the unhovered color red and the hovered color the secondary color for the theme.

export const ButtonSlider = styled(Button)(
({  }) => `
    background-color: red;
`
);

<ButtonSlider 
    color='secondary'
    variant="contained">
    {data.buttonText}
</ButtonSlider>

I've found that setting the sx property like this will change the unhovered color to whatever is in data.buttonColor:

<ButtonSlider
    sx={{backgroundColor: data.buttonColor}}
    color='secondary'
    variant="contained">
    {data.buttonText}
</ButtonSlider>

But I can't figure out how to change the hovered color to data.buttonHoverColor.

• reactjs
• material-ui

2 Answers 2

You can achieve this by passing both buttonColor and the buttonHoverColor as props to the ButtonSlider and then pass the values to the ButtonSlider component when it's rendered.

interface ButtonSliderProps extends ButtonProps {
  buttonColor: string;
  buttonHoverColor: string;
}

const ButtonSlider = styled(Button, {
  shouldForwardProp: (prop) => prop !== "buttonColor" && prop !== "buttonHoverColor",
})<ButtonSliderProps>(({ buttonColor, buttonHoverColor }) => ({
  backgroundColor: buttonColor,
  "&:hover": {
    backgroundColor: buttonHoverColor,
  },
}));

<ButtonSlider
    color="secondary"
    variant="contained"
    buttonColor={data.buttonColor}
    buttonHoverColor={data.buttonHoverColor}
    >
      {data.buttonText}
</ButtonSlider>

The reason I have shouldForwardProp method defined in the styled function is to prevent you from getting errors like this in your console:

React does not recognize the buttonColor prop on a DOM element.

I hope this fixes your challenge.

I found this syntax styling the hover pseudo-selector in the sx property works perfectly:

<ButtonSlider
    sx={{
        backgroundColor: dataSlider.buttonColor, 
        '&:hover':{
            backgroundColor:dataSlider.buttonHoverColor
        },
    }}
    variant="contained">
    {data.buttonText}
</ButtonSlider>