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 created 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-09-27
Star Count 195296
Watcher Count 6655
Fork Count 40431
Issue Count 1113

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Feature: Add ability to see group names in the register 1 2022-01-04 2022-09-17
Source property should take array instead of single image 0 2021-11-21 2022-05-17
Is there any Slack channel or Google group for CCF? 2 2021-12-28 2022-09-17
How to use Gtk layer shell with gtkmm (the c++ binding) 1 2022-03-12 2022-09-14
wf-shell dont work well now because in my system gtk3 is updated to 3.24.31 3 2022-01-13 2022-09-14
C-Lightning Liquidity ads support (Leasing funds) 0 2021-09-22 2022-08-30
Web terminal unusable on macOS 10.11.6/Chrome (was: " on FreeBSD) 8 2022-05-10 2022-09-01
yolov5ncnn实时检测 15 2020-11-07 2021-12-22
Check if there is a new patch/minor/major update 4 2021-10-25 2022-08-17
processing catalog does not write files 4 2022-08-11 2022-09-07
Init correct language for Symfony Translator 0 2021-10-07 2022-08-16
fs_cli hang on debian 11 whith stable v1.10.7 (reproducible) 1 2022-09-18 2022-09-17
libavmod build error 1 2022-09-12 2022-09-17
Become a github tool 6 2017-07-04 2022-06-29
Sympy can't solve integral 4 2022-03-16 2022-09-13
Question about CPU footprint 2 2021-09-27 2022-09-09
Program that needs bluetooth permissions just exits 3 2022-07-31 2022-08-21
[FEAT] Do Refetch in useEditableTable or useTable 6 2022-02-04 2022-08-27
[Bug] React does not recognize the `isFacebook` prop on a DOM element. 0 2022-01-28 2022-08-14
[BUG]: npx init downloading the old template ( 3.3.0 ) instead of new one 6 2022-08-29 2022-09-11
plog-converter generates invalid SARIF files 5 2021-09-11 2022-09-17
Vertical Center for Input Elements 1 2022-09-06 2022-09-11
Screen Selection on title 1 2022-09-06 2022-09-11
Add Text Tool produces to large label 1 2022-09-06 2022-09-11
shift click to select multiple boxes 3 2022-02-21 2022-09-16
Question: Usage of jit.off() for FFI Lua callbacks 2 2021-05-13 2022-09-26
Tools repo with CEL/PCX -> CLX converters and an MPQ compressor 3 2022-07-20 2022-08-16
[v6][Feature]: Provide a way to access the internal `history` instance 5 2022-02-21 2022-09-22
`Microsoft.Windows.Compatibility` hard-locked on version `5.0.0` 4 2021-08-25 2022-09-20
Add MakuluLinux to Quick Setup 0 2021-01-15 2022-02-10
Time scale individual for each node 3 2021-10-14 2022-08-30
Server Directory Traversal - Critical Vulnerabilities 7 2022-08-16 2022-09-09
Set max file size for `presignedPutObject` 5 2022-06-08 2022-09-20
Error with using redis and cloud-trace-nodejs 3 2021-12-08 2022-09-20
进度条拖拽事件如何监听 1 2021-08-06 2022-01-21
`cargo doc` is broken when `default-featues = false` 3 2021-09-16 2022-09-16
Iterating over a PageRangeInclusive can cause panic 6 2022-02-27 2022-09-16
Unable to add authorization to the angular route and page created using plugin? 5 2021-12-22 2022-09-17
proposal: runtime/pprof: add WriteGoroutineLabels function for logging 8 2022-02-16 2022-02-24
[Bug] `eksctl` selects local zones as availability zones if none are defined during cluster creation 2 2022-04-12 2022-09-23
traits4.rs: wrong number of line 2 2022-08-16 2022-09-18
Food for the one who needs it (If In home quarantine) 2 2021-04-30 2022-09-23
Foundation - Deduplicate Progress and Progress Ring. 0 2022-09-07 2022-09-20
Mark CreateCounterPass() as inline 0 2021-11-08 2022-09-04
HTTP 502 "This page is taking too long to load" on matrix workflow 3 2022-03-27 2022-08-20
mod_push does not trigger if publish-options are included 8 2021-11-09 2022-09-23
https-dns-proxy: Does not work with latest master (r20146-bc43ad88ed) 2 2022-07-20 2022-09-13
Latest master causes issues 6 2020-03-16 2022-09-15
Quality report email: infer assignment status from the assignee field instead of the bug status 4 2021-12-21 2022-09-26
SkeletonPage Header content is not laid out as expected 1 2022-03-08 2022-09-14