将@supports与样式组件一起使用

Question

我最近切换到使用styled-components作为我的样式，我一直试图让CSS的@supports功能工作，但没有运气。

@supports语法有点像：

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

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

  

注意：＆符号（＆amp;）被我们为该样式化组件生成的唯一类名替换

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

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

Answer 1

这似乎是styled-components中的真正错误！您根本不需要将＆符号放在那里，它应该像媒体查询一样工作：

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

现在不行，所以我打开了an issue with our parser，希望很快就能解决。一旦修好，我会更新这个答案！