Как я могу изменить приоритет между двумя классами в Styletron?

Question

Я пытаюсь оформить меню, используя Styletron и React-Router . В частности, я хочу, чтобы цвет шрифта менялся, когда маршрут активен. (Под «активным» я подразумеваю, что пользователь находится на странице, соответствующей этой ссылке меню).

В React-Router есть компонент с именем NavLink, который может добавить CSS класс (но не удалять классы) из элемента, когда маршрут активен.

Я использую styled для создания стиля NavLink и установки activeClassName prop для вывода styletronClientInstance.renderStyle() ( ниже я буду называть его «активным» классом)

Проблема заключается в том, что оба класса изменяют свойство color. Оба класса генерируются с одинаковой спецификой, поэтому правила CSS требуют, чтобы победило последнее определенное определение класса (как описано в этот полезный ответ SO ).

Есть ли способ заставить сгенерированный «активный» класс иметь приоритет над другими сгенерированными классами? Например, есть ли способ заставить определенный класс быть определенным позже, чем другие?

Я создал git репозиторий с небольшой демонстрацией проблемы здесь . Ниже приведены некоторые соответствующие фрагменты:

// App.js
import React from 'react';
import {BrowserRouter} from 'react-router-dom';
import {Client} from 'styletron-engine-atomic';
import {Provider as StyletronProvider} from 'styletron-react';

import MenuTemplate from './Menu';

const client = new Client();

const Menu = MenuTemplate(client);

function App() {
  return (
    <StyletronProvider value={client}>
      <BrowserRouter>
        <Menu />
      </BrowserRouter>
    </StyletronProvider>
  );
}

export default App;

// Menu.js
import React from 'react';
import {NavLink} from 'react-router-dom';
import {styled} from 'styletron-react';

// This is just a container so you can see what's going on
const StyledMenuBackground = styled('div', {
  backgroundColor: 'black',
  padding: '5px',
});

// Turn the link text white
const StyledNavLink = styled(NavLink, {
  ':link': {color: 'white'},
  ':visited': {color: 'white'},
  color: 'white',
  margin: '2px',
});

const MenuTemplate = styletronClientInstance => {
  // When active, change the link text color.
  const activeClass = styletronClientInstance.renderStyle({
    ':link': {color: 'orange'},
    ':visited': {color: 'orange'},
    color: 'orange',
    // You can see the text decoration changing correctly, even
    // when the color doesn't change as expected.
    textDecoration: 'none',
  });

  return () => (
    <StyledMenuBackground>
      <ul>
        <li>
          <StyledNavLink exact to="/" activeClassName={activeClass}>
            Default
          </StyledNavLink>
        </li>
        <li>
          <StyledNavLink to="/other" activeClassName={activeClass}>
            Other
          </StyledNavLink>
        </li>
      </ul>
    </StyledMenuBackground>
  );
};

export default MenuTemplate;

Когда активна ссылка по умолчанию, вы можете увидеть, как подчеркивание исчезает (указывая, что оно помечено как активное), но цвет не меняется на оранжевый .

Изучив раздел «Стили» инструментов разработчика Chrome, вы можете увидеть, что классы для применения оранжевого цвета текста были добавлен, но переопределяется стилем ссылки по умолчанию.