CSS Custom Properties that Dynamically Update with React & JavaScript

Learn how to create CSS Variables (Custom Properties) and dynamically update them in a React application. We'll walk through spinning up a new React app, creating custom properties for existing styles, and updating those properties based on interactions.

🧐 What's Inside

00:00 - Intro to CSS Custom Properties
00:15 - CSS Custom Properties Overview
01:20 - Creating a new React application with Create React App
02:27 - Adding a Custom Variable or Custom Property to change the React logo color
05:49 - Getting the value of a CSS Custom Property with JavaScript
07:30 - Setting the value of a CSS Custom Property with JavaScript
08:57 - Dynamically resizing the React logo with a CSS Custom Property
12:04 - Speeding up a CSS animation by updating a CSS Custom Property
16:04 - Outro

🗒️ Read More

🔔 Subscribe for more tech and developer videos

🐦 Get updates straight to your Twitter @colbyfayock

📸 Catch the next stream live on Twitch @colbyfayock

✉️ Or a newsletter right to your inbox!

💝 Sponsor me for more free content like this!

🎥 Want to know what A/V equipment I use?

🧰 More Resources

Custom properties (--*): CSS variables

Using CSS custom properties (variables)

Create React App

🎼 Music
Music from Uppbeat (free for Creators!):
License code: JCDJYDXDJ4HEA2B9

#colbyfayock #css #react #webdevelopment

[erinkahn]

I'm so glad I found your videos! You're a great teacher.

[DevilKnight]

I watched this video and I subscribed. Great content, keep it up.

[marlonmorales]

Amazing, great job with this tutorial, it help me a lot

[harishsivaramakrishnan]

Awesome one dude! But please turn on Word-wrap in your VScode, that'll make it even more easy for us to look at the code
Shortcut (Alt + Z)

[DontFollowZim]

I prefer not to do direct DOM manipulation with libraries like Vue or React if possible, so for something like this, instead of setting the style on the `documentElement`, I would put it right in the template/JSX as a style attribute on one of the elements:

`<svg style={'--color-logo': color}>...</svg>`

This, of course, requires a `useState` variable to hold the values and also requires you to have an appropriate element to put the styles on, so if the controlling component doesn't have access to the element that is getting controlled, then you'll need some type of global state.

[QtheCoder]

To take this 1 step further, how would we implement this to a database for users? Basically, a user with a admin page can customer a look of something/thier page.

[VitorHugo-npqs]

How can i export these value to set global color palletes?

[anhtuanle]

Tks so much. but it to down perfomance in app ?

[dailymeow]

Hey Colby, can i add animation in the :root{} and keyframes to a css variable ?

[tuyenkhong]

Whats the benefit of this over using state and directly modify React Element ?

Wouldnt this be a bad practice as it directly modifies the DOM, which violates the principle of React.