button becomes transparent on hovering

Admin 1
Viewed 1515

My button component looked like this and it worked fine:

<Button
component={Link}
to={link}
style={{
  background: '#6c74cc',
  borderRadius: 3,
  border: 0,
  color: 'white',
  height: 48,
  padding: '0 30px',
  width: 200,
}}
//className={classes.button}
>
{text}
</Button>

However, now I am trying to move from inline styles to this:

export const useStyles = makeStyles(() =>
  createStyles({
    button: {
      background: '#6c74cc',
        borderRadius: 3,
        border: 0,
        color: 'white',
        height: 48,
        padding: '0 30px', 
        width: 200,        
    },
  }),
);

Now when I hover over my button, it becomes transparent/translucent. Even though the styling is the same as before. How can I stop this?

material-ui typescript reactjs css javascript
2 Answers

Using the makeStyles and createStyles overrides the theme of the desired component, like a Button, Text etc.

You can do this savely by overriding the root of the component. Otherwise the button will keep the default root theme and clashes so to say with your styles. Which in your case would be the hover effect.

Using an inline style as you had before is equivalent to the following two examples. Which one you will use is up to you, but the first one overrides the root and the second implements a custom hover effect using the classes.button object:

const useStyles = makeStyles(createStyles({
    root: {
      background: "#6c74cc",
      borderRadius: 3,
      border: 0,
      color: "white",
      height: 48,
      padding: "0 30px",
      width: 200
    }
  })
);

export default function StackOverflowDemo() {
  const classes = useStyles();

  return <Button className={classes.root}>Hello Sandbox!</Button>;
}

As an alternative solution you could add the hover effect yourself inside the "button" object like the following:

const useStyles = makeStyles(() =>
  createStyles({
    button: {
      background: "#6c74cc",
      borderRadius: 3,
      border: 0,
      color: "white",
      height: 48,
      padding: "0 30px",
      width: 200,
      "&:hover": {
        background: "red", // <- add here your desired color, for demonstration purposes I chose red
      }
    }
  })
);

export default function StackOverflowDemo() {
  const classes = useStyles();

  return <Button className={classes.button}>Hello Sandbox!</Button>;
}

Notice the &:hover syntax? This is JSS syntax which Material-UI includes. A good reading starting point would be:

user_39771340

Check in the dev tools where its coming from. i assume its default styling. if so - all you got to do is to override it with the style you want. in your case - if you want nothing to happen during hover add something like:

button:hover {
      background: '#6c74cc',
}

or with nesting

button: {
//...
"&:hover" {
background: '#6c74cc',
}
}
user_124780960
Related