我最近改用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;
}
}
`;