css - 为什么我不能对 `styled-components` 使用线性渐变？

Question

问题:

当我使用 styled-components 在 react-native 中创建具有这种样式的简单 View 时:

const Container = styled.View`
  flex: 1;
  background: linear-gradient(#006ded 0%, #1bace2 34.48%, #00e2ed 100%);
`;

我收到这个错误:

Error: Failed to parse declaration "background: linear-gradient(#006ded 0%, #1bace2 34.48%, #00e2ed 100%)"

这不是线性渐变的正确用法吗？我有一个 friend 的设计文件，只是复制了 css 代码。我不得不承认，我对 css 不太擅长，但我在 mozilla 文档中查找了它。似乎语法不正确？

如何使用 3 种颜色实现此渐变？

Answer 1

使用属性属性

import LinearGradient from 'react-native-linear-gradient'

export const Container = styled(LinearGradient).attrs({
 colors: ['#000','#fff'],
 start: { x: 0, y: 0 },
 end: { x: 1, y: 0 },
})`
 /* your css here */
`;