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!
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