javascript - 在样式组件中使用@supports

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

@supports语法的用法类似于：

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

现在，这很好，因为样式化组件文档具有以下行：


  注意：“＆”号将替换为我们为该样式化组件生成的唯一类名


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

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

最佳答案

这似乎是styled-components中的真正错误！您根本不需要将“＆”号放在此处，它的工作原理就像媒体查询一样：

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

不过现在还没有，所以我打开了an issue with our parser，希望很快就可以解决。修复后，我将更新此答案！