In React how to CSS reference variables in separate files

Question

I have a react project, I have inserted a bunch of variables which I would ideally be able to reference from other CSS files to have a single code base for certain UI configuration (colours, buttons, etc.).

Though I'm unsure if it should be inside of body{} or :root{}

Index.css

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
    
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  margin: 0;

  min-width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;

  background-repeat: no-repeat;
  background: var(--GradientLighterBlue);

  --LightBlue:rgb(1,147,207); 
  --MediumBlue: rgb(1, 126, 207);
  --DarkBlue: rgb(7, 101, 195);
  --GradientLighterBlue: linear-gradient(0deg, rgba(1,126,207,1) 0%, rgba(1,147,207,1) 100%);
  --GradientDarkerBlue: linear-gradient(0deg, rgba(7,101,195,1) 0%, rgba(0,72,144,1) 100%);


  --LightYellow: rgb(252,177,52);
  --MediumYellow: rgb(194,136,41);
  --GradientYellow: linear-gradient(0deg, rgba(194,136,41,1) 0%, rgba(252,177,52,1) 100%);
}

How do I reference these eg. var(--LightYellow) in for example home.css ?

Noam · Accepted Answer · 2022-06-08 08:21:16Z

1

In most cases there is no practical difference between putting the variables on the :root element or on the body element, since all visible elements should be descendants of the body element, but it's a good practice to put the on the root element.

You can reference the variables normally (i.e. var(--LightBlue)) from any other stylesheet, regardless of the order of the stylesheets, because custom properties are inherited.

answered Jun 8, 2022 at 8:21

Noam

1,6348 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Smit · Accepted Answer · 2022-06-08 08:11:55Z

0

use :root{} for declare global uses.

answered Jun 8, 2022 at 8:11

Smit

423 bronze badges

Comments

nart · Accepted Answer · 2022-06-08 08:13:28Z

0

:root and html are reference to the top-level element (they're same). So your css-variables should be there in order to use globally across files:

/*
  css-variable will be available everywhere
*/
html {
  --LightBlue:rgb(1,147,207); 
  --MediumBlue: rgb(1, 126, 207);
}

If you open random website for example nextjs.org and inspect the html tag you will the they put their css-variables there.

answered Jun 8, 2022 at 8:13

nart

1,8782 gold badges15 silver badges26 bronze badges

Collectives™ on Stack Overflow

In React how to CSS reference variables in separate files

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related