按钮在悬停时变得透明

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覆盖所需组件的主题，例如 a等Button。Text您可以通过覆盖root组件的 来安全地执行此操作。否则该按钮将保留默认root主题并与您的样式发生冲突。在您的情况下，这将是悬停效果。像以前一样使用内联样式等同于以下两个示例。您将使用哪一个由您决定，但第一个覆盖root，第二个使用该对象实现自定义hover效果：classes.buttonconst useStyles = makeStyles(createStyles({&nbsp; &nbsp; root: {&nbsp; &nbsp; &nbsp; background: "#6c74cc",&nbsp; &nbsp; &nbsp; borderRadius: 3,&nbsp; &nbsp; &nbsp; border: 0,&nbsp; &nbsp; &nbsp; color: "white",&nbsp; &nbsp; &nbsp; height: 48,&nbsp; &nbsp; &nbsp; padding: "0 30px",&nbsp; &nbsp; &nbsp; width: 200&nbsp; &nbsp; }&nbsp; }));export default function StackOverflowDemo() {&nbsp; const classes = useStyles();&nbsp; return <Button className={classes.root}>Hello Sandbox!</Button>;}作为替代解决方案，您可以自己在“按钮”对象中添加悬停效果，如下所示：const useStyles = makeStyles(() =>&nbsp; createStyles({&nbsp; &nbsp; button: {&nbsp; &nbsp; &nbsp; background: "#6c74cc",&nbsp; &nbsp; &nbsp; borderRadius: 3,&nbsp; &nbsp; &nbsp; border: 0,&nbsp; &nbsp; &nbsp; color: "white",&nbsp; &nbsp; &nbsp; height: 48,&nbsp; &nbsp; &nbsp; padding: "0 30px",&nbsp; &nbsp; &nbsp; width: 200,&nbsp; &nbsp; &nbsp; "&:hover": {&nbsp; &nbsp; &nbsp; &nbsp; background: "red", // <- add here your desired color, for demonstration purposes I chose red&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }));export default function StackOverflowDemo() {&nbsp; const classes = useStyles();&nbsp; return <Button className={classes.button}>Hello Sandbox!</Button>;}

Answer 2

检查它来自哪里的开发工具。我假设它的默认样式。如果是这样 - 你所要做的就是用你想要的风格覆盖它。在你的情况下 - 如果你不想在悬停期间发生任何事情，请添加如下内容：button:hover {&nbsp; &nbsp; &nbsp; background: '#6c74cc',}或嵌套button: {//..."&:hover" {background: '#6c74cc',}}