Search code examples
cssreactjsstyled-components

How to pass colors as props to a linear gradient background property in styled components

This is what my component looks like I can't figure out the syntax to pass the colors as props the background property. Thanks for having a look

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

  • I figured it out

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