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

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-gradient div

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

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