get only rendered component color variables from global color variable file

user_2217167 0
Viewed 137

color_variables.css:

[data-theme='default'] {
  --avatar_bg: #000;
  --avatar_text: #fff;
  --avatar_border: red;
  --button_bg: blue;
  --button_text: #fff;
  --button_border: darkblue;
  --modal_widget_bg: orange;
  --footer_bg: yellow;
  --footer_text: #000; 
}

avatar.css:

.avatar {
  background-color: var(--avatar_bg);
  color: var(--avatar_text);
  border: 1px solid var(--avatar_border);
}

button.css:

.button {
  background-color: var(--button_bg);
  color: var(--button_text);
  border: 1px solid var(--button_border);
}

We have a single color_variables.css file for all components (avatar, button, footer, tab, etc..,). For eg: I have a page that renders only avatar component, it renders avatar.js and avatar.module.css file. So, other unnecessary components will not be rendered in that page.

My question is, Is there any way to pick the used variables from color_variables.css file. I said I have a page that renders avatar component only. So, I want to get the color value of these three variables (--avatar_bg, --avatar_text, --avatar_border) from color_variables.css file. I don't need button color variables and other unnecessary color variables in that page. Is there any way to pick only needed color variables? (I don't wish to split that global variable file)

npm reactjs css javascript
2 Answers

you can send from the parent component only the CSS variables you need and let it handle "reading" and assigning the variables to the components that need them

user_54596400

you just need to import color_variables.css in your index.js or app.js so all other component detect your css from color_variables.css

user_92890150
Related