javascript - 按钮悬停时变为透明

Question

我的按钮组件看起来像这样并且工作正常:

<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>

但是，现在我正在尝试从内联样式转变为:

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

现在，当我将鼠标悬停在按钮上时，它会变得透明/半透明。虽然造型和以前一样。我怎样才能阻止这个？

Answer 1

使用 makeStyles 和 createStyles 覆盖所需组件的主题，例如 Button、Text 等.

您可以通过覆盖组件的root 来节省时间。否则，按钮将保留默认的 root 主题，并与您的样式发生冲突。在您的情况下，这将是悬停效果。

像以前一样使用内联样式相当于以下两个示例。您将使用哪一个取决于您，但第一个覆盖 root ，第二个使用 classes.button 实现自定义 hover 效果> 对象:

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>;
}

作为替代解决方案，您可以在“按钮”对象中自行添加悬停效果，如下所示:

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>;
}

注意到 &:hover 语法了吗？这是 Material-UI 包含的 JSS 语法。 一个好的阅读起点是:

• Material UI - Styles Documentation - Included JSS Plugins
• CSS in JS