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

Question

我最近改用了 styled-components对于我的样式，我一直在尝试使 CSS 的 @supports 功能正常工作，但没有成功。

@supports 语法的用法有点像:

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

现在这没问题了，因为 styled-components 文档有以下行:

Note: Ampersands (&) get replaced by our generated, unique classname for that styled component

但是当我尝试使用符号来使用它时，它不起作用。当使用下面的代码时，我在输出的 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希望它能尽快得到解决。一旦修复，我会更新这个答案!