如何在 JSX 中做 CSS :hover 功能？

Question

您好，感谢您在这里所做的出色工作。我正在为我的项目使用 react.js 来构建我的组件，我现在感觉有点卡在我的项目中。我正在尝试使用悬停功能设置按钮的样式，但我不知道如何应用它来做出反应。

这是代码：

 let button = {
    backgroundColor: colorPalette.white,
    border: "1px solid rgb(12,106,145)",
    color: colorPalette.brandCol1,
    textAlign: 'center',
    textDecoration: 'none',
    fontSize : 'inherit',
    fontWeight : 600,
    padding : "5px 8px 5px 8px"
}

我想像我们在css中一样添加一个悬停样式

button:hover {
style here.......
}

什么是正确的语法？

原文由 user8116786 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用：

     const styles = {
    myStyleClassName: {
            padding: '16px 0px 16px 0px',
            '& a': {
                textDecoration: 'none',
                color: '#0000ee',
            },
            '& a:hover': {
            textDecoration: 'underline',
        },
    },
    myButtonClass: {
        '&:hover': {
             textDecoration: 'underline',
        },
    },
};

….

 render() {
    <span className={myStyleClassName}><a tag><button><someDomObjct></span>
    <button className={myButtonClass}>my label</button>
}

请参阅： http ://cssinjs.org/jss-nested/?v=v6.0.1 回购并不是所有事情都必需的，上面应该开箱即用。

原文由 generalG 发布，翻译遵循 CC BY-SA 4.0 许可协议