CSS variable with Styled Components in Next.js/React.js

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.

Happy coding 🚀

---

Get my weekly newsletter “Developer Underdogs” with the best developer content created by aspiring developers.