Reactjs problem with CSS variable in style prop

Question

Firstly, this is my code:

<div className="phone" style="--bg: var(--green)">

But the error is like:

Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

so I change my code into

<div className="phone" style={{--bg: var(--green)}}>
    <div className="name">So dien thoai</div>
</div>
<div className="fb" style={{--bg: var(--blue)}}>
    <div className="name">Facebook</div>
</div>
<div className="gg" style={{--bg: var(--red)}}>
    <div className="name">Google</div>
</div>

:root{
  --red: #ee4d2d;
  --blue: #0288d1;
  --green: #6cc942;
}
.phone, .fb, .gg{
    display: flex;
    padding: 4px 0;
    border: 1px solid black;
    background: var(--bg);
    
    .name{
        padding-left: 20px;
    }
}

They told me i can't use --bg in style={{ }}

vsync · Accepted Answer · 2021-12-14 09:03:02Z

5

style={{'--bg': 'var(--green)'}}

in JSX you must use style attribute as above.

The first (outer) {} is the JSX syntax and the inner {} is the actual javascript object representing the style properties/values.

ReactDOM.render(<div style={{'--bg': 'var(--green)'}}/>, document.body)

body{ --green: green }

div{
  width: 200px;
  height: 100px;
  background: var(--bg); /* using the variable defined from JSX */
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

I suggest you next time to Google the error instead of rushing to open a new question here, as there is a ton of information on Google

edited Dec 14, 2021 at 9:03

answered Dec 14, 2021 at 8:59

vsync

133k61 gold badges345 silver badges430 bronze badges

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

1 Comment

thienms98 Over a year ago

I got it. Hao Wu was right, they needed inside "".

Vương Dương · Accepted Answer · 2021-12-14 09:09:13Z

-2

example: style={{color: "var(--red)"}} not ";"
style={{ "--bg": "var(--red)", background: "var(--bg)" }}
demo: https://codesandbox.io/s/ecstatic-keldysh-4dspr?file=/src/App.js

edited Dec 14, 2021 at 9:09

answered Dec 14, 2021 at 9:03

Vương Dương

11 bronze badge

1 Comment

General Grievance Over a year ago

Putting all your text in a code block makes it really difficult to read. Can you please format it better?

Collectives™ on Stack Overflow

Reactjs problem with CSS variable in style prop

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related