- 1 min
CSS variable with Styled Components

Since Iām working with Next.js and Styled-components (also TypeScript, React, GraphQL, Apollo, Storybook & Storyblok CMS) I was wondering, is it possible to use CSS variableās in Styled Components.
import React, { Component } from 'react'import styled from 'styled-components'const CSSVariables = styled.div` --color: ${props => props.color};`const Heading = styled.h1` margin: 2rem 0 0 0; color: var(--color);`const SingleStep = (props: Istep) => { return ( <CSSVariables> <Heading>My Heading</Heading> </CSSVariables> ) // All component logic}
As you can see in the example above, it is possible and super simple, just like in normal CSS. So make sure that you CSS variable are created in a parent component. It can also be created on a page/layout level if you like.
So I hope this helps you further with building a cool Next.js or React application with Styled-components.
Thanks!
After reading this post, I hope you learned something new or are inspired to create something new! š¤
If I left you with questions or something to say as a response, scroll down and type me a message. Please send me a DM on Twitter @DevByRayRay when you want to keep it private. My DMās are always open š

RayRay
Iām Ray, a Frontend Developer since 2009 living in the Netherlands. I write about Frontend Development, JavaScript, TypeScript, Angular, CSS, VueJS and a lot more related topics.
Want to reach me for comments or questions on my blog? Send a DM on Twitter @DevByRayRay