Javascript color code variables inside the css file (React JS)

Question

I have the list of color codes in the JS file.

JavaScript:

export var ColorCodes = { 
    first:'#D09FD2',  
    second:'#A72500',  
    third:'#F67GHI',   
    fourth:'#8FERDD',  
}

I tried to use the js variables inside the CSS file like below.

it throws errors.

CSS:

import 'my.js'

.firstColor{

    font-size:15px;
    color:ColorCodes.first;
    }

.secColor{

    font-size:12px;
    color:ColorCodes.second;
    }

HTML

<div class="firstColor">aaa</div>

Lelouch · Accepted Answer · 2019-09-23 07:26:45Z

5

you cannot use js inside css, instead you should abstract your color codes inside your css and then use dynamic classes via javascript

answered Sep 23, 2019 at 7:26

Lelouch

9707 silver badges19 bronze badges

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

Comments

P4uB0rd4 · Accepted Answer · 2019-09-23 07:37:16Z

2

There is a thing you can try, according with w3 it works, check it here .

:root {
  --first-color: #D09FD2;
  --second-color: #A72500;
  --third-color: #F67GHI;
  --fourth-color: #8FERDD;
}

.firstColor{

    font-size:15px;
    color:var(--first-color);
    }

.secColor{

    font-size:12px;
    color:var(--second-color);
    }

answered Sep 23, 2019 at 7:37

P4uB0rd4

1755 bronze badges

Collectives™ on Stack Overflow

Javascript color code variables inside the css file (React JS)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related