# CSS variable with Styled Components

Since I’m working with [Next.js](https://nextjs.org/) and [Styled-components](https://styled-components.com/) (also [TypeScript](https://nextjs.org/docs/basic-features/typescript), React, GraphQL, [Apollo](https://www.apollographql.com/), [Storybook](https://storybook.js.org/) & [Storyblok CMS](https://www.storyblok.com/)) I was wondering, is it possible to use CSS variable’s in Styled Components.

```typescript
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!
![hashnode-footer.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629789655319/nBF6anHH4w.png)
*I hope you learned something new or are inspired to create something new after reading this story! 🤗 If so, consider subscribing via email (scroll to the top of this page) or follow me here on Hashnode.
*

> Did you know that you can create a [Developer blog like this one, yourself](https://hashnode.com/@devbyrayray/joinme)? It's entirely for free. 👍💰🎉🥳🔥

*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](https://twitter.com/@devbyrayray) when you want to keep it private. My DM's are always open 😁*