javascript - :hover and :focus in javascript css object怎么写

Question

我正在尝试为 React 组件中的 :hover 和 :focus 编写样式。这是我尝试过的。

这是我的组件

<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 覆盖的规则。所以悬停也不起作用。我已将 important 添加到规则中，并且它可以正常工作。这是更正后的代码。感谢您的支持。

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