CODEWITHSUNDEEP
reactjsmaterial-ui
Joe Cook
Joe Cook

Reputation: 71

React Material UI Button override the hove style

My code is set up a little different than any other examples I can find for this functionality. I need to override the hove backgroundColor of the button. I create a component that using the 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

I am able to pass in the background color and set it to anything I want but I want to be able to change the hover color and I cannot figure out a way with my code set up.

Upvotes: 0

Views: 152

Answers (1)

Vo Quoc Thang
Vo Quoc Thang

Reputation: 1396

I think you can pass it like this

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

Upvotes: 1

Related Questions