使用@supports與樣式化組件

Question

我最近已切換到使用styled-components進行樣式設置，並且我一直在試圖獲得CSS的@supports功能，但沒有運氣。

的@supports語法使用有點像：

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

現在，這是精細的風格組件文檔有下面這行：

注意：連字符號（&）GET取而代之的是我們爲該款式組件生成的唯一類別名稱

但是，當我嘗試使用＆符號來使用它時，它不起作用。如果使用下面的代碼我得到一個符號在輸出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，它應該有希望很快得到解決。一旦它解決了，我會更新這個答案！