Блог

Главная - Вопросы по программированию - Почему мой класс не применяется к определенному элементу sass

Почему мой класс не применяется к определенному элементу sass

#css #reactjs #sass

#css #reactjs #нахальство

Вопрос:

Итак, я использую React и sass, и я попытался использовать activeClassName свойство для a <NavLink> , и я понял, что мой активный класс не работает, потому что активный класс предшествовал классу по умолчанию. Как мне устранить эту проблему?

Вот код

HTML

         <div className="nav-dropdown">
        <div className="dropdown-links-list">
            <div> <NavLink to="/" exact activeClassName="dropdown-link-active">
               <span>Home</span>
            </NavLink> </div>
            <NavLink to="/order" exact  activeClassName="dropdown-link-active">
               <span>Order</span>
            </NavLink>
            <NavLink to="/about" exact  activeClassName="dropdown-link-active">
                <span>About</span>
            </NavLink>
            <NavLink to="/FAQ" exact activeClassName="dropdown-link-active">
                <span>FAQ</span>
            </NavLink>
        </div>
    </div>

CSS — код

 .nav-dropdown {
  width: 100%;
  background: blue;
  height: 100%;

  .dropdown-links-list a {
    display: grid;
    margin-top: -1px;
    grid-template-columns: 1fr;
    padding: 20px;
    background: #fff;
    height: 50px;
    text-decoration: none;
    border: none;
    @include grid-center;
    span {
      color: #000;
      font-size: 17px;
      text-align: center;
    }
  }
}

.dropdown-link-active {
  background-color: #fff;
}

Заранее благодарю вас

Комментарии:

1. вы пробовали с помощью .test.dropdown-link-active {}?

2. Да, и я удалил «тестовый» класс, который я случайно оставил там, извините за это.

Ответ №1:

Что я бы сделал, так это переписал стили более простым способом. Ваша NavLink будет иметь класс по умолчанию и класс-модификатор, разделенные двумя дефисами.

 <div className="nav-dropdown">
    <div className="nav-dropdown__links">
        <NavLink
            to="/home"
            exact
            className="nav-dropdown__link"
            activeClassName="nav-dropdown__link--active"
         >
           <span>Home</span>
         </NavLink>
    </div>
</div>

SCSS будет выглядеть так:

 .nav-dropdown {
  //style
  amp;__links {
    //style
  }
  amp;__link {
    background: #fff;
    height: 50px;
    text-decoration: none;
    span {
      color: #000;
      font-size: 17px;
      text-align: center;
    }
    amp;--active {
      background-color: yellow;
    }
  }
}