将重复的 css 属性传递给标签样式答案

【问题标题】：Pass duplicated css property to tags style将重复的 css 属性传递给标签样式
【发布时间】：2019-09-06 06:41:07
【问题描述】：

我想在 react.js 中写入 2 个相同 css 属性的值。我可以做一个字符串：

`height: ${this.props.height + 1}px; height: calc(${this.props.height}px + var(--d));`

但是 react 不接受字符串作为样式。

那我应该通过什么？

<div style={whatShouldIPlaceHere} />

【问题讨论】：

请问您为什么要应用重复值？只有一个会实际应用于渲染。
看起来您正在使用旧版浏览器后备。那是对的吗？这是否涵盖您的情况？ stackoverflow.com/questions/42260533/…
其实这是有道理的。但是样式是 React 中的对象，因此它不允许重复键。也许styled-components 可以提供帮助？过去十年中几乎所有浏览器都支持calc，但我敢肯定有些浏览器不支持。好问题！
这个评论主题可能会有所启发：github.com/facebook/react/issues/6467 但是，您是否需要重复样式作为后备样式？如果是这样，也许检查样式组件或 CSS 模块。
@RutherfordWonkington，calc 不是问题，但css variables 是。

【解决方案1】：

找到cssText 属性的解决方案。
它似乎有效，但实际上打字稿不同意存在这样的属性......

<div style={{ cssText: `height: ${this.props.height + 1}px; height: calc(${this.props.height}px + var(--d));` }} />

【讨论】：