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

Posted

技术标签:

【中文标题】样式道具中CSS变量的Reactjs问题【英文标题】:Reactjs problem with CSS variable in style prop 【发布时间】: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)" 【参考方案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 

【讨论】:

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

以上是关于样式道具中CSS变量的Reactjs问题的主要内容,如果未能解决你的问题,请参考以下文章

如何在 reactjs 中使用伪元素作为内联样式? [复制]

缺少元素的“关键”道具。 (ReactJS 和 TypeScript)

将道具传递给兄弟姐妹reactJS时未定义

Typescript reactjs无法将道具传播到输入标签

Bootstrap cdn 覆盖了我在 react js 中的自定义 css 样式

如何在 React js 中将道具传递给 API URL?