串联内嵌CSS中的道具（React）

我目前正在尝试在内联CSS中使用道具。我很想知道为什么在背景图像属性上使用线性渐变时不能连接this.props.color。是否有其他方法可以实现这一目标，或者我遗漏了什么

render() { 
    let background = {
        width: "100%",
        height: "100%",
        position: "fixed",
        left: 0,
        top: 0,
        backgroundImage: "linear-gradient(to right," + this.props.color + "0%, #0072ff 100%)"
    };
    return (
        <div style={background}></div>
      );
}

render（）{
让背景={
宽度：“100%”，
高度：“100%”，
位置：“固定”，
左:0,，
排名：0，
背景图片：“线性渐变（向右），+this.props.color+“0%，#0072ff 100%”
};
返回(
);
}

正在使用的组件：

     <Background color='red'/>

---

在

0%之前需要一个空格

请执行以下操作：

render() { 
    let background = {
        width: "100%",
        height: "100%",
        position: "fixed",
        left: 0,
        top: 0,
        backgroundImage: `linear-gradient(to right,${this.props.color} 0%, #0072ff 100%)`
    };
    return (
        <div style={background}></div>
      );
}

render（）{
让背景={
宽度：“100%”，
高度：“100%”，
位置：“固定”，
左:0,，
排名：0，
背景图像：`线性渐变（向右，${this.props.color}0%，#0072ff 100%）`
};
返回(
);
}

什么是

red0%

应该是什么意思？哦，天哪……空间。非常感谢。帮自己一个忙，使用模板字符串