스타일이 지정된 구성 요소와 함께 @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에 진짜 버그가 보인다! 당신은 그냥 미디어 쿼리처럼 작동합니다, 모두가 앰퍼샌드를 넣을 필요가 없습니다 : 그것은 지금, 비록 내가 an issue with our parser을 연하지 않으며이 곧 희망 해결해야

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

. 일단이 문제가 수정되면이 답변을 업데이트하겠습니다!