时间戳

首页 > 解决方案 > 如果有两个类，则使用样式组件应用样式

css - 如果有两个类，则使用样式组件应用样式

问题描述

我有一个反应应用程序，我正在尝试使用样式组件编写如下 CSS 规则：

.react-draggable-transparent-selection .preview-wrapper:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(4px);
}

我正在尝试这个，但它似乎不起作用：

const PreviewContainer = styled.div`
  position: relative;
  height: 100%;
  flex-grow: 1;

  & .react-draggable-transparent-selection {
    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      backdrop-filter: blur(5px);
    }
  }
`;

.react-draggable-transparent-selection 类和 .preview-wrapper 不在同一个元素上。如何使用样式化组件编写此代码？

标签： cssreactjsstyled-components

解决方案

具有类的元素是 的react-draggable-transparent-selection子元素PreviewContainer吗？像下面这样的东西？

<PreviewContainer>
  ...
    <div className="react-draggable-transparent-selection">

    </div>
  ...
</PreviewContainer>

如果是，这就是您使用 Styled Components 设置样式的方式：

const PreviewContainer = styled.div`
  position: relative;
  height: 100%;
  flex-grow: 1;

  & .react-draggable-transparent-selection {
    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      backdrop-filter: blur(5px);
    }
  }
`;

推荐阅读