Объединение реквизита в Inline CSS (React)

В настоящее время я пытаюсь использовать реквизит в моем встроенном CSS. Мне интересно знать, почему я не могу объединить this.props.color при использовании линейного градиента для свойства background-image. Возможно, есть другой способ достичь этого или я что-то упустил?

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

Используемый компонент:

     <Background color='red'/>

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>
      );
}
Другие вопросы по тегам