A styled-like styling solution that lets you write @scope'd css.
import { createScoped } from "scoped-css-react"; const Container = createScoped("main")` :scope { background: black; } span { color: red; } `; export default function App() { return ( <Container> <h1> <span>Hey</span> there! </h1> </Container> ); } /** <div> <style> @scope { :scope { background: black; } span { color: red; } } </style> <h1> <span>Hey</span> there! </h1> </div> **/Your component needs to take a
childrenprop
const StyledButton = createScope(Button)` :scope { color: red; } svg { --size: 0.875rem; } `;const StyledButton = createScope(Button)` :scope { color: ${(props) => props.variant === "ghost" ? "black" : "white"}; } svg { --size: 0.875rem; } `;