如何使用样式组件中发生变化的类

Question

可能有人问过这个问题，但我找不到答案。我是样式组件的新手，但慢慢开始欣赏它们。我试图了解如何获取类名，因为它们是动态变化的。我正在做的代码是：

样式化组件

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，但会出现在它旁边。