如何在styled-components中向线性渐变background属性传递颜色props

解决方案 #

你可以直接在linear-gradient的颜色参数位插入props回调，两种常用实现方式如下：

方案1：分别传入渐变的起止色

修改组件定义：

const CustomButton = styled.button`
  // other attributes
  height: ${props => props.height || "40px"};
  background: linear-gradient(
    322.24deg, 
    ${props => props.gradientStart || "#60D9FF"} -4.38%, 
    ${props => props.gradientEnd || "#1D74FF"} 48.84%
  );
`

组件调用示例：

// 保留默认渐变
<CustomButton>默认按钮</CustomButton>

// 自定义渐变颜色
<CustomButton gradientStart="#FF6B6B" gradientEnd="#F06595">粉紫渐变按钮</CustomButton>

方案2：支持自定义整个background属性值

如果需要同时支持纯色、自定义角度渐变等更灵活的场景，可以直接把整个background值作为props传递：

const CustomButton = styled.button`
  // other attributes
  height: ${props => props.height || "40px"};
  background: ${props => props.background || "linear-gradient(322.24deg, #60D9FF -4.38%, #1D74FF 48.84%)"};
`

组件调用示例：

// 纯色按钮
<CustomButton background="#40C057">绿色按钮</CustomButton>

// 自定义角度渐变
<CustomButton background="linear-gradient(90deg, #FFD43B, #FF922B)">橙黄渐变按钮</CustomButton>

内容的提问来源于stack exchange，提问作者Mike Haslam