PartTimeCoder
PartTimeCoder
KPCKevin Powell - Community
Created by PartTimeCoder on 5/6/2024 in #front-end
Dynamically Swapping CSS Variables in React
Hi everyone! First time posting here 🙂 Not sure if this is possible (or even recommended), I am wondering how to dynamically swap out css variables, not just update the variable value. Example, there is a list of projects displayed, I click one and a modal opens with all the details associated with the selected project. Each project manager has their own css variable with their color (eg --name1: red, --name2: blue, etc). Is there a way to dynamically check the project manager name, and then assign the background-color with the corresponding variable, or do I need to have just one variable name (eg --proj-manager) and then have it set the color to that variable?
The project is in React, and there are dozens of project managers so many different colors to be set. I will also be using the css variables for the managers in other areas of the app as well. I do have sass in the project too, but would prefer css variables if possible, but I am open to either. I should also mention I am a noob, self-taught over the last 2 years (with lots of tutorials from Kevin) and working on my first real project now. Any assistance or direction would be appreciated!
1 replies