After making the switch to styled-components for my styling, I've been attempting to implement the @supports feature of CSS without success.
The syntax for @supports looks something like this:
@supports (display: grid) {
.Container {
background-color: orange;
}
}
Although the styled-components documentation states:
Note: Ampersands (&) get replaced by our generated, unique classname for that styled component
When trying to use the ampersand as instructed in my code, it doesn't seem to work correctly. Instead, with the following code snippet, an ampersand appears in the CSS output:
const Container = styled.div`
@supports (display: block) {
& {
background-color: seagreen;
}
}
`;