按钮在悬停时变得透明

Question

我的按钮组件看起来像这样并且工作正常：<Buttoncomponent={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覆盖所需组件的主题，例如 a等Button。Text

您可以通过覆盖root组件的 来安全地执行此操作。否则该按钮将保留默认root主题并与您的样式发生冲突。在您的情况下，这将是悬停效果。

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

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

}

Answer 2

检查它来自哪里的开发工具。我假设它的默认样式。如果是这样 - 你所要做的就是用你想要的风格覆盖它。在你的情况下 - 如果你不想在悬停期间发生任何事情，请添加如下内容：

button:hover {

      background: '#6c74cc',

}

或嵌套

button: {

//...

"&:hover" {

background: '#6c74cc',

}

}