# CSS Variables for React Devs

DevFeed: [CSS Variables for React Devs](<https://devfeed.tech/articles/css-variables-for-react-devs-45193.md>)

Original publisher: [Read original article](<https://www.joshwcomeau.com/css/css-variables-for-react-devs/>)

Author: Josh W. Comeau

Published: 2020-04-13T13:15:00Z

Content type: tutorial

Language: en

Sources: [Josh Comeau's blog](<https://devfeed.tech/sources/josh-comeau-s-blog.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Tutorial](<https://devfeed.tech/topics/tutorial.md>), [Open Props](<https://devfeed.tech/topics/open-props.md>), [React](<https://devfeed.tech/topics/react.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [styled-components](<https://devfeed.tech/topics/styled-components.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Media Queries](<https://devfeed.tech/topics/media-queries.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [css-in-js](<https://devfeed.tech/tags/css-in-js.md>), [css-variables](<https://devfeed.tech/tags/css-variables.md>), [front-end](<https://devfeed.tech/tags/front-end.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [media-queries](<https://devfeed.tech/tags/media-queries.md>), [react](<https://devfeed.tech/tags/react.md>), [styled-components](<https://devfeed.tech/tags/styled-components.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>)

## AI overview

A tutorial for React developers on using CSS Custom Properties to improve styling workflows and create dynamic themes. It explains how CSS variables work, including inheritance, scoping, global definitions, and their use alongside CSS-in-JS tools.

## Source excerpt

CSS variables are *really* cool, and they're incredibly powerful when it comes to React! This tutorial shows how we can use them with React to create dynamic themes. We'll see how to get the most out of CSS-in-JS tools like styled-components, and how our mental frame around media queries has been wrong all along.