样式道具中CSS变量的Reactjs问题答案

【问题标题】：Reactjs problem with CSS variable in style prop样式道具中CSS变量的Reactjs问题
【发布时间】：2022-01-17 14:30:24
【问题描述】：

首先，这是我的代码：

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

但错误如下：

错误：style 属性需要从样式属性到值的映射，而不是字符串。例如，使用 JSX 时 style={{marginRight: spacing + 'em'}}。

所以我把我的代码改成

<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;
    }
}

他们告诉我我不能在 style={{ }} 中使用 --bg

【问题讨论】：

不确定。但是试试这个{"--bg": "var(--green)"}

标签： css reactjs sass

【解决方案1】：

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

在 JSX 中你必须像上面一样使用style 属性。

第一个（外部）{} 是 JSX 语法，内部 {} 是表示样式属性/值的实际 javascript 对象。

ReactDOM.render(&lt;div style={{'--bg': 'var(--green)'}}/&gt;, 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>

我建议你下次去Google这个错误而不是急于在这里打开一个新问题，因为Google上有大量信息

【讨论】：

我明白了。郝武说的对，他们需要在“”里面。

【解决方案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

【讨论】：

把你所有的文本都放在一个代码块里，真的很难阅读。你能把它格式化一下吗？