Как работать с классами, которые меняются в styled-компонентах

Question

Возможно, этот вопрос задан, но у меня проблемы с поиском ответа.Я новичок в styleled-компонентах, но постепенно начинаю ценить их.Я пытаюсь понять, как получить имя класса, учитывая, что они меняются динамически.Код, который я делаю:

компонент в стиле

export const NavOpen = styled.div`
  position: absolute;
  top: 25px;
  left: 30px;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  width: 35px;
  height: 25px;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
`;

javascript

const slideInWindow = display => {
  if (display) {
    const navWindow = document.querySelector(".sc-ifAKCX");
    navWindow.classList.add("slidein");
  }
};

JSX

<NavOpen onClick={() => slideInWindow(true)}>
  <Bar1 />
  <Bar2 />
  <Bar3 />
  {display && <X onClick={() => closeWindow(false)} />}
</NavOpen>

Класс .sc-ifAKCX раньше был чем-то другим.Я уверен, что я ошибаюсь, но пытаюсь понять, как мне обращаться к классу, если он изменится на меня.

Answer 1

Вы можете дать каждому стилизованному компоненту имя класса по вашему выбору:

export const NavOpen = styled.div.attrs({
  className: 'slidein-target'
})`
  position: absolute;
  top: 25px;
  left: 30px;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  width: 35px;
  height: 25px;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
`;

Теперь каждый экземпляр NavOpen будет иметь класс slidein-target в своем списке классов, который вы можете использовать в качестве селектора запросов..

Обратите внимание, что slidein-target не заменит сгенерированное имя класса sc-XXXXXX, но появится рядом с ним.