React - невозможно стилизовать активное состояние навигационной ссылки реагирующего маршрутизатора с модулями css

Цель

Я пытаюсь применить стили к активному маршруту на боковой панели с помощью модулей css, однако я хочу сохранить базовые стили (назначив 2 класса)

Я пробовал этот код

   <NavLink
      to={path}
      className={`
       ${classes.nav_link} ${({ isActive }) =>
        isActive ? classes.active : classes.nav_link}
        }
      `}
    >

Но он компилируется в Снимок скомпилированного кода css в devtools

Я использую CSS-модули, Реакция маршрутизатора V6

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
1
0
45
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если я правильно понял ваш запрос, то вам нужно правильно использовать тернарный оператор (что-то вроде ниже в соответствии с вашим требованием):

<NavLink
  to={path}
   className={({ isActive }) =>
    isActive ? classes.active : classes.nav_link
  }
>

Это сработало отлично, мне пришлось применить одни и те же базовые стили для обоих классов, а затем настроить (активно) специальные стили. тысм брат

justELMO 23.04.2022 14:05

Другие вопросы по теме