样式道具中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(<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>
我建议你下次去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)
Typescript reactjs无法将道具传播到输入标签