Is it possible to use CSS defined colors directly on jsx tags?

From CSS file:

:root {
    --color-accent: #E67E22;
}

Inside jsx file:

<h1> This is a word in <span style={{color:'#E67E22'}}> Orange </span></h1>

The result is the same, but I want to use my CSS –color-accent.

>Solution :

You should add the variable as a string:

<h1> This is a word in <span style={{ color:'var(--color-accent)' }}> Orange </span></h1>