如果有两个类，则使用样式组件应用样式答案

【问题标题】：applying style using styled components if two classes如果有两个类，则使用样式组件应用样式
【发布时间】：2021-05-31 12:05:07
【问题描述】：

我有一个 react 应用程序，我正在尝试使用样式组件编写如下 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 不在同一个元素上。如何使用样式化组件编写此内容？

【问题讨论】：

标签： css reactjs styled-components

【解决方案1】：

类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);
    }
  }
`;

【讨论】：

嗨，杰弗里，不，不是。它在祖先身上。这实际上是我打算在我的 OP 中写的，但我有一个额外的“&”。

【解决方案2】：

好的，我很确定样式化组件不支持应用基于祖先的样式，该祖先具有基于this issue 的条件 css 类。我已经用样式化的组件here 打开了我自己的 github 问题，但与此同时，我在 react 中使用 state 解决了这个问题，并像这样作为 prop 传递：

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

  ${({ isDragging }) => isDragging &&
    css`
      &:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        backdrop-filter: blur(5px);
      }
    `
  }
`;

【讨论】：