javascript - CSS渐变，其中颜色值是从元素prop派生的

我正在为神奇宝贝渲染数据卡。每种神奇宝贝类型都有相关的颜色。火是红色，水是蓝色，草是绿色。有些宠物小精灵有一种，有些宠物小精灵有两种。

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

宠物小精灵有18种类型。总计324个组合。我知道我可以为每种组合.fire-ice {colors}硬编码类，但是必须有更好的解决方案。

如何以编程方式实现这一目标？我正在使用Sass并做出反应

最佳答案

1-设置一个对象以映射power:color。

2-将神奇宝贝能力阵列转换为颜色阵列并将其连接到字符串

3-将颜色字符串放入background:linear-gradient(...)内联样式中

看下面的代码：

 const colors = {
  grass: 'green',
  fire: 'red',
  water: 'blue'
 }
 function getColor(powers){
  if(powers.length === 1) return colors[powers[0]];
  return 'linear-gradient('+powers.map(p=> colors[p]).join()+')';
 }

 // testing..
 const powers = [
  ['grass'],
  ['fire','water'],
  ['fire'],
  ['fire','water','grass']
 ];
 powers.forEach(p => console.log(getColor(p)));

要进行反应，请使用<div style={{background: getColor(this.props.powers)}}/>