React Styled Components - Gradient [重复]

Question

如何将 css 渐变添加到样式化组件？

background: radial-gradient(50% 50%, circle cover, red 0, blue 100%);

Answer 1

styled-components 中的渐变与常规 CSS 中的渐变相同，但您的渐变语法似乎无效——例如多年前的 cover 关键字 was only in early browser implementations。试试这个：

background: radial-gradient(circle at center, red 0, blue 100%);

阅读 MDN 上的Using radial gradients 了解更多详情。

此外，DevTools（右键单击 > 检查元素）会在您的样式出现问题时告诉您：