怎么写：hover和：专注于javascript css对象

Question

我正在尝试编写样式：hover和：focus inside react component。这是我尝试过的。

这是我的组件

<MyBtn className={classes.authBtn}> This is sample text </MyBtn>

在我的样式对象中，我已经在网上找到了一些文档。

authBtn: {
        '&:hover': {
            backgroundColor: '#1565C0'
        }
    }

接下来，

'authBtn_hover': {
    backgroundColor: '#1565C0'
}

接下来，

authBtn: {
            ':hover': {
                backgroundColor: '#1565C0'
            }
        }

Answer 1

问题在于css样式。我尝试过的内联css组件的规则。所以悬停也没有用。我已经添加了重要的规则，它可以正常工作。这是更正后的代码。感谢您的支持。

authBtn: {
    backgroundColor: '#1565C0',
    '&:hover': {
        backgroundColor: '#0D47A1 !important',
    }
}

Answer 2

之前我遇到过这个问题，我使用Radium

解决了这个问题

这允许您将样式定义为JS对象，但它确实支持像悬停这样的半状态。它附带了许多其他有用的功能

https://github.com/FormidableLabs/radium