Does VSCode support CSS variables in react? error

Question

This code work, but VSCode return error.

ReactDOM.render(
	 <span  style={{"--backlight-color": "red"}} /* change color of span */ >text</span>,
	document.getElementById('root')
);

:root {
  --backlight-color: silver; /* default color of span*/
}

span {
  background-color: var(--backlight-color);
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>

This error is on line <span style={{"--backlight-color": "red"}} >text</span>,:

Types of property 'style' are incompatible. Type '{ "--backlight-color": any; }' is not assignable to type 'CSSProperties'. Object literal may only specify known properties, and '"--backlight-color"' does not exist in type 'CSSProperties'.

Does VSCode support CSS variables in react?
How else should you implement it?

I do not want it to display this error in VScode.

It's about this bug: https://github.com/facebook/react/issues/6411

set background-color:silver insteadd of --backlight-color: silver; — לבני מלכה
– לבני מלכה, Commented Jun 7, 2018 at 11:17

לבני מלכה · Accepted Answer · 2018-06-07 11:20:06Z

0

You have to set

root {
  background-color:silver;
}

instead

root {
  --backlight-color: silver;
}

answered Jun 7, 2018 at 11:20

לבני מלכה

16.3k2 gold badges26 silver badges48 bronze badges

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

2 Comments

לבני מלכה Over a year ago

tell me for more help

lukaszpolowczyk Over a year ago

No. This is default color of span. It's about the error VSCode shows.

publicJorn · Accepted Answer · 2024-03-01 09:44:17Z

0

It seems this is still an issue today. You can work around it by typecasting the custom property:

<span style={{ "--backlight-color": "red"}: as React.CSSProperties}>text</span>

credit: https://stackoverflow.com/a/54128069/1783174)

If you need this in more then one place, I suggest you add it to the TS definitions as described here: https://stackoverflow.com/a/70398145/1783174

edited Mar 1, 2024 at 9:44

answered Mar 1, 2024 at 9:38

publicJorn

2,5161 gold badge22 silver badges32 bronze badges

1 Comment

lukaszpolowczyk Over a year ago

I won't check because I haven't been using React lately.

Collectives™ on Stack Overflow

Does VSCode support CSS variables in react? error

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related