1

我最近改用styled-components进行样式设置,并且一直在尝试使 CSS 的 @supports 功能正常工作,但没有成功。

@supports 语法的使用有点像:

@supports (display: grid) {
    .Container {
        background-color: orange;
    }
}

现在这很好,因为 styled-components 文档有以下行:

注意:&符号(&)被我们为该样式组件生成的唯一类名替换

但是当我尝试使用&符号来使用它时,它不起作用。使用下面的代码时,我在输出的 CSS 中得到一个 & 符号

const Container = styled.div`
    @supports (display: block) {
      & {
        background-color: seagreen;
      }
    }
`;
4

1 回答 1

6

这似乎是一个真正的错误styled-components!您根本不需要将 & 号放在那里,它应该像媒体查询一样工作:

const Container = styled.div`
  @supports (display: block) {
    background-color: seagreen;
  }
`;

不过现在还不行,所以我用我们的解析器打开了一个问题,希望它很快就会得到解决。修复后我会更新这个答案!

于 2017-04-23T13:45:11.813 回答