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，但会显示在其旁边。

如何使用样式更改的组件类

1 个答案: