Why on:hover css effect doesn't work in react?

Question

Im started learn react, but can't understand, why my style doesn't work in @hover?

Button - is a custom library button. By default I can change its color in "style" line, but I can't change it on hover effect.

const linkStyle = {
background: 'red',
'&: hover': {background: 'blue'}
}

export default function App() {
return (
<Theme className="App">
‹Button
label="My Button"
iconLeft={IconAlert}
size="m"
style={linkStyle}
</Theme>

Where am I wrong?

I tried many many many times

Answer 1

hover can't be applied at inline-css, you can use the sx prop to provide the CSS -

  const linkStyle = {
    background: "red",
    "&:hover": {
      background: "blue",
    },
  };

  <MuiButton sx={linkStyle}>Button</MuiButton>