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

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 与以前有所不同。我确定我做错了，但我想了解如果我要改变我应该如何查询类(class)。

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