Bug: string CSS variables for use in the content property on pseudo elements do not have quotation marks so do not appear

This issue has been tracked since 2022-09-07.

React version: 18.2.0

Steps To Reproduce

  1. Create a CSS selector that uses a CSS variable for the content property on a pseudo element.
.my-class:before {
  content: var(--i-am-a-string);
}
  1. Update the variable for an element via the style prop
const style = { "--i-am-a-string": "I should appear" } as React.CSSProperties;
<div className="my-class" style={style} />

Link to code example:

https://codesandbox.io/s/magical-goldwasser-vebg5f?file=/src/App.js

The current behavior

The CSS variable passed to the content property is not surrounded by quotation marks

The expected behavior

The CSS variable passed to the content property is surrounded by quotation marks "I should appear"

eps1lon wrote this answer on 2022-09-10

The variable will have the literal value I should appear when you want a string for display. If you want a string then you need to add quotation marks like so

-const style = { "--i-am-a-string": `${header}` };
+const style = { "--i-am-a-string": `'${header}'` };

This is how every value for inline styles works in React.

More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-10-05
Star Count 195628
Watcher Count 6648
Fork Count 40518
Issue Count 1111

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date