如何在MUI 5中为React按钮设置绑定数据的自定义悬停背景色？

方法一：修改Styled组件，通过Props传递颜色 #

让ButtonSlider接收自定义颜色属性，在样式中同时配置常规和悬停状态的背景色：

export const ButtonSlider = styled(Button)(({ buttonColor, buttonHoverColor }) => `
  background-color: ${buttonColor};
  &:hover {
    background-color: ${buttonHoverColor} !important;
  }
`);

使用时直接传入数据中的颜色值：

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

注：添加!important是为了覆盖MUI内置的contained按钮悬停样式优先级，若自定义颜色能正常生效，可去掉该声明。

方法二：直接在sx属性中配置悬停样式 #

MUI的sx属性支持伪类选择器，直接在里面定义:hover状态样式即可：

<ButtonSlider
    sx={{
      backgroundColor: data.buttonColor,
      '&:hover': {
        backgroundColor: data.buttonHoverColor
        // 若默认样式优先级更高，可添加!important强制覆盖
        // backgroundColor: `${data.buttonHoverColor} !important`
      }
    }}
    variant="contained">
    {data.buttonText}
</ButtonSlider>

注意事项 #

• 若保留color='secondary'，MUI的主题样式可能与自定义样式冲突，建议移除该属性以避免干扰。
• 确保data.buttonColor和data.buttonHoverColor是有效的CSS颜色值（如十六进制、RGB、颜色名称等）。

内容的提问来源于stack exchange，提问作者binsworth