javascript - 将字符串传递给线性渐变时，样式化的组件会静默失败

Question

我将以下字符串作为道具传递给我的样式：

let colorsString = "#48b500, #FFFF00, #f52700"
<LegendStyle colors={colorsString}>
  <div className='map-gradient'></div>
</LegendStyle>

然后我有一个这样的定义：

const LegendStyle = s.div `
  .map-gradient {
    height: 100px;
    width: 20px;
    background: linear-gradient(${props => props.colors});
 }
`

但是背景样式没有应用到我的.map-gradientdiv

这是渲染后 chrome 检查器中的样式：

.efZtAp .map-gradient {
    height: 100px;
    width: 20px;
}