某些CSS模块样式未得到应用

Question

我很难使用CSS模块应用我的CSS规则之一。

这是React代码和CSS样式。 除active类应用于锚点外，所有规则均active 。 我尝试了不同的名称，不同的选择器，但无法使其与锚元素一起使用（ hover和active伪类均正常工作）。

 import React from 'react'; import classes from './NavigationItem.css'; const navigationItem = (props) => { return ( <li className={classes.NavigationItem}> <a className={classes.active} href={props.link} > {props.children}</a> </li> ); }; export default navigationItem; 

 .NavigationItem { margin: 0; box-sizing: border-box; display: flex; height: 100%; align-items: center; } .NavigationItem a { color: white; text-decoration: none; height: 100%; padding: 16px 10px; border-bottom: 4px solid transparent; box-sizing: border-box; display: block; } .NavigationItem a:hover, .NavigationItem a:active .NavigationItem a.active { background-color: #8f5c2c; border-bottom: 4px solid #40a4c8; color: white; } 

如果我将内联样式对象与相同的CSS属性一起使用，则它可以正常工作。

 const style = { backgroundColor: '#8f5c2c', borderBottom: '4px solid #40a4c8', color: 'white' }; 

Chrome devtools还显示锚点正在获取active类。

有谁知道为什么吗？

Answer 1

这里缺少逗号： .NavigationItem a:active在最后。 应该是这样的：

.NavigationItem a:hover,
.NavigationItem a:active,
.NavigationItem a.active {
    background-color: #8f5c2c;
    border-bottom: 4px solid #40a4c8;
    color: white;
}