CSS 部分模块样式未应用

Question

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

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

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 class.

有人知道为什么吗？

Answer 1

这里少了一个逗号：.NavigationItem a:active 最后。应该是这样的：

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

CSS 部分模块样式未应用

Some of CSS modules styles are not being applied

javascript

css

reactjs

css-modules