在内联CSS中串联prop（反应）

Question

我目前正在尝试在内置CSS中使用道具。我很想知道为什么在 background-image属性上使用 linear-gradient 时，为什么不能连接 this.props.color 。我是否可以通过其他方式实现这一目标？或者我错过了什么？

try (Git git = new Git(repository)) {
    git.push().call();
}

正在使用的组件：

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>
      );
}

Answer 1

在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>
      );
}