为什么 on:hover css 效果在 React 中不起作用？

Question

我开始学习 React，但不明白，为什么我的风格在 @hover 中不起作用？

Button - 是一个自定义库按钮。默认情况下，我可以在“样式”行中更改其颜色，但无法在悬停效果上更改它。

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>

我哪里错了？

我尝试了很多很多很多次

Answer 1

hover 不能应用于 inline-css，您可以使用 sx prop 来提供 CSS -

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

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