Javascript 如何使渐变背景与单色反应？

我想为React中的组件创建一个渐变背景，如下图所示

我想这样做：

这些组件的样式如下

backgroundColor="this.props.colour"

---

现在我只想传递颜色属性，我不想传递两种颜色，而且颜色将是十六进制代码。

您仍然需要以某种方式指定第二种颜色。您可以传入第一种颜色，然后计算组件中的第二种颜色。在这里，我将第二种颜色转换为比输入颜色暗20%

您可以根据具体用例的需要调整逻辑

类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
常量框=（{color1}）=>{
常量rgb=[color1.子字符串（1,3），color1.子字符串（3,5），color1.子字符串（5,7）]；
const color2=`rgb（${rgb.map（c=>（parseInt（c，16）*0.8））.join（）}）`；
返回(
);
}
ReactDOM.render（，document.getElementById（“app”）
.box{
宽度：100px；
高度：100px；
}
为什么不在
背景色上方使用渐变层来实现此目的：


.box{
高度：200px；
宽度：200px；
背景：线性梯度（rgba（250,0,0,0.5），透明；
背景色：橙色/*这是您的原色*/
}

就我而言，您链接的图像是两种颜色之间的渐变（粗略地说，从红色到橙色）……是的，它是两种颜色（橙色、浅橙色）之间的渐变，但我想使用橙色的单色原色。