javascript - 在 React 组件上内联组合 CSS 和自定义 CSS 属性

Question

我需要将自定义 CSS 属性内联传递给 React 组件(在本例中为 Google Model Viewer)，并结合更多常规样式(背景宽度、高度等)。关于在 React 中使用自定义属性的问题有很多，但我没有看到专门将属性与其他样式组合在一起的问题。

我这里有样式，注释掉的样式是自定义属性的示例。

const styles = {
      width: "100%",
      height: "100%",
      background: this.props.background,
     // "--progress-bar-height": this.props.progressBarHeight
 };

const 被传递到渲染组件中:

return (
      <model-viewer
        style={styles}
      </model-viewer>

如何将常用的内联样式与自定义属性结合起来以添加内联？

我尝试将其添加为变量(如 SO 其他地方所见):

const progressBarHeight={ "--progress-bar-height": this.props.progressBarHeight };

但不确定如何将它与 {styles} 结合起来。我尝试手动声明每种样式并将变量添加到列表中，但这也不起作用:

 style={{ background: styles.background, width: styles.width, height: styles.height, progressBarHeight }}

有什么建议吗？

Answer 1

您可以为此简单地使用对象传播

style={{...styles, ...progressBarHeight }} // progressBarHeight = { "--customrvar" : '1px'}

这是一个有效的 demo