Объединение реквизита в 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>
);
}