如何将颜色作为道具传递给样式组件中的线性渐变背景属性答案

【问题标题】：How to pass colors as props to a linear gradient background property in styled components如何将颜色作为道具传递给样式组件中的线性渐变背景属性
【发布时间】：2021-08-18 02:41:16
【问题描述】：

这就是我的组件的样子我无法弄清楚将颜色作为道具传递给背景属性的语法。感谢观看

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

【问题讨论】：

您只想传递 `#60D9FF` 或所有颜色或所有字符串 linear-gradient(322.24deg, #60D9FF -4.38%, #1D74FF 48.84%)?
我想将 #60D9FF 作为字符串 props.color1 和 #1D74FF props.color2 传递
我看到链接更新了

标签： css reactjs styled-components

【解决方案1】：

我想通了

background:linear-gradient(322.24deg,${props => props.color1} -4.38%, 
${props => props.color2} 48.84%);

【讨论】：