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-gradientしかし、背景スタイルは私のdivに適用されません

これは、レンダリング後のクロム インスペクターのスタイルです。

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