<div id="root"></div>
const { createGlobalStyle } = styled;
const GlobalStyle = createGlobalStyle`
:root {
--theme-primary: #F5005E;
}
`;
const StyledApp = styled.div`
color: var(--theme-primary);
`;
function App() {
return (
<StyledApp>
<GlobalStyle />
My color is set using CSS custom properties and createGlobalStyle 🤩
</StyledApp>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
View Compiled
This Pen doesn't use any external CSS resources.