Javascript Css渐变，其中颜色值源自元素道具

我正在为口袋妖怪绘制数据卡。每个口袋妖怪类型都有一个关联的颜色。火是红的，水是蓝的，草是绿的。有些口袋妖怪有一种类型，有些口袋妖怪有两种类型

如果口袋妖怪有一种类型，我希望背景颜色是纯色，但棘手的是如果口袋妖怪有两种类型，我希望背景颜色是渐变色。例如，火精灵的背景为纯红，而水/草精灵的背景为蓝/绿渐变

有18种口袋妖怪类型。总共324个组合。我知道我可以为每个组合硬编码类。fire ice{colors}，但必须有更好的解决方案

---

如何通过编程实现这一点？我正在使用sass和react

1-设置要映射的对象

power:color

2-将口袋妖怪电源阵列转换为颜色阵列，并将其连接到字符串

3-将颜色字符串放入

背景：线性渐变（…）

内联样式

请看下面的代码：

const colors={
草：“绿色”，
火：“红色”，
水：“蓝色”
}
函数getColor（powers）{
if（powers.length==1）返回颜色[powers[0]；
返回“线性渐变（'+powers.map（p=>colors[p]）.join（）+”）；
}
//测试。。
常数幂=[
[“草”]，
[‘火’、‘水’]，
[“火”]，
[‘火’、‘水’、‘草’]
];
powers.forEach（p=>console.log（getColor（p））

1-设置要映射的对象

power:color

2-将口袋妖怪电源阵列转换为颜色阵列，并将其连接到字符串

3-将颜色字符串放入

背景：线性渐变（…）

内联样式

请看下面的代码：

const colors={
草：“绿色”，
火：“红色”，
水：“蓝色”
}
函数getColor（powers）{
if（powers.length==1）返回颜色[powers[0]；
返回“线性渐变（'+powers.map（p=>colors[p]）.join（）+”）；
}
//测试。。
常数幂=[
[“草”]，
[‘火’、‘水’]，
[“火”]，
[‘火’、‘水’、‘草’]
];
powers.forEach（p=>console.log（getColor（p））您可以根据传递的道具动态设置元素的样式（CSS）。您只需要从口袋妖怪类型映射到一种颜色，然后检查是否只有一种或两种类型，并使用该类型设置
背景颜色
或
背景图像
（使用线性渐变）

例如：


const口袋妖怪类型={
火：“火”，
水：“水”，
草：“草”，
}
常量口袋妖怪类型颜色={
[口袋妖怪类型.火]：“#ff0000”，
[口袋妖怪类型.水]：“#0000ff”，
[口袋妖怪类型.草]：“#00ff00”，
}
常量应用=（）=>{
返回(
)
}
const PokemonCard=道具=>{
常量{name，types}=props；
让风格；
如果（types.length==2）{
const typeColor1=POKEMON_TYPE_COLORS[types[0]；
const typeColor2=POKEMON_TYPE_COLORS[types[1]；
style={“backgroundImage”：`线性渐变（45度，${typeColor1}，${typeColor2}）`；
}否则{
const typeColor=POKEMON_TYPE_COLORS[types[0]；
style={“backgroundColor”：typeColor}；
}
返回(
{name}
)
}
ReactDOM.render（，document.querySelector（“#root”）
.pokemon卡{
颜色：#fff；
宽度：10雷姆；
身高：5雷姆；
填充：.75rem 1rem；
边缘底部：1rem；
}
您可以根据传递的道具动态设置元素的样式（CSS）。您只需要从口袋妖怪类型映射到一种颜色，然后检查是否只有一种或两种类型，并使用该类型设置
背景颜色
或
背景图像
（使用线性渐变）

例如：


const口袋妖怪类型={
火：“火”，
水：“水”，
草：“草”，
}
常量口袋妖怪类型颜色={
[口袋妖怪类型.火]：“#ff0000”，
[口袋妖怪类型.水]：“#0000ff”，
[口袋妖怪类型.草]：“#00ff00”，
}
常量应用=（）=>{
返回(
)
}
const PokemonCard=道具=>{
常量{name，types}=props；
让风格；
如果（types.length==2）{
const typeColor1=POKEMON_TYPE_COLORS[types[0]；
const typeColor2=POKEMON_TYPE_COLORS[types[1]；
style={“backgroundImage”：`线性渐变（45度，${typeColor1}，${typeColor2}）`；
}否则{
const typeColor=POKEMON_TYPE_COLORS[types[0]；
style={“backgroundColor”：typeColor}；
}
返回(
{name}
)
}
ReactDOM.render（，document.querySelector（“#root”）
.pokemon卡{
颜色：#fff；
宽度：10雷姆；
身高：5雷姆；
填充：.75rem 1rem；
边缘底部：1rem；
}

“/CODE”总是考虑2种颜色，如果有一种颜色，那么两种颜色都是相同的，所以你总是以一种两种颜色的梯度结束，你可以很容易地设置内嵌或使用CSS变量，总是考虑2种颜色，如果是一种颜色，那么两种颜色都是相同的，所以你总是以一种两种颜色的梯度结束，你可以很容易地设置它们。内联或使用CSS变量