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

Question

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

样式组件

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>

class .sc-ifAKCX 与以前有所不同。我确定我做错了，但我想了解我应该如何查询 class 如果它会改变我。

Answer 1

您可以为每个样式组件指定一个 class 您选择的名称：

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 实例的 class 列表中都会有 class slidein-target，您可以将其用作查询选择器。

请注意，slidein-target 不会替换生成的 class 名称 sc-XXXXXX，但会出现在它旁边。

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

How to work with classes that change in styled-components

javascript

styled-components

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

How to work with classes that change in styled-components

javascript

styled-components

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