React Material UI Button 覆盖了 hove 样式答案

【问题标题】：React Material UI Button override the hove styleReact Material UI Button 覆盖了 hove 样式
【发布时间】：2021-03-19 15:23:43
【问题描述】：

我的代码设置与我能找到的任何其他用于此功能的示例略有不同。我需要覆盖按钮的hove backgroundColor。我创建了一个使用 Material UI Button 的组件

 export const MultiButton = ({
  width,
  height,
  backgroundColor,
  borderColor = 'red',
  color,
  children,
  onClick,
  disabled,
  variant,
  selected,
}: MultiButtonProps): JSX.Element => {
  const StyledButton = withStyles({
    root: {
      width,
      height,
      border: selected ? `2px solid ${borderColor}` : undefined,
      backgroundColor,
      color,
    }
  })(Button)
  return (
    <CustomButton disableRipple onClick={onClick} variant={variant} disabled={disabled}>
      {children}
    </CustomButton>
  )
}

export default multiButton

我可以传入背景颜色并将其设置为我想要的任何颜色，但我希望能够更改悬停颜色，但我无法找到设置代码的方法。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我觉得你可以这样通过

 root: {
     "&:hover": {
        backgroundColor: "#000 !important"  
      },
      width,
      height,
      border: selected ? `2px solid ${borderColor}` : undefined,
      backgroundColor,
      color,
}

【讨论】：