Некоторые стили CSS-модулей не применяются - PullRequest
Новая
       12

Некоторые стили CSS-модулей не применяются

0 голосов
/ 12 сентября 2018

Мне трудно применить одно из моих правил CSS с помощью модулей CSS.

Вот код React и стили CSS.Все правила работают, кроме класса 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.

Кто-нибудь знает, почему?

1 Ответ

0 голосов
/ 12 сентября 2018

Здесь пропущена запятая: .NavigationItem a:active в конце.Должно быть так: 

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