Javascript 结合；“正常”；在react组件上内联的css和自定义css属性

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

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

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

常量被传递到呈现组件：

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

但我不知道如何将它与

{style}

结合起来。我尝试直接声明每种样式并将变量添加到列表中，但这也不起作用：

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

---

有什么提示吗？

一个简单的对象映射不应该起作用吗？ 下面是一个示例代码-

const styles = {
      width: "100%",
      height: "100%",
      background: "this.props.background",
      //"--progress-bar-height": "black"
 };
 
 const props = {
      "--progress-bar-height": "white"
 }
 
 for(let i in props)
 {
    styles[i] = props[i];   
 }
 
 for(let i in styles)
 {
    console.log(styles[i]);   
 }

还有小提琴链接

---

然后生成的组合样式进入组件的道具中。

您可以简单地使用对象展开进行此操作

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

这是一张工作票

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