Pass Props To Styled-components

I am querying data for my react site using graphql from my CMS (prismic.io) in order to produce color themed pages. I want to pass a variable or props into my styled component to c

Solution 1:

You could do the following.

constContactButton=styled.button`background:#004655;color:${props=>props.color||'#fff'};font-size:2rem;padding:10px;`;

See codesandbox example here.

Here would be the component code:

  .....componentconst [color, setColor] = React.useState("#fff");

  React.useEffect(() => {
    fetch(URL).then(data => {
      setColor(data.response);
    });
  }, []);

  return (
    <divclassName="App"><ContactButtoncolor={color}>White</ContactButton></div>
  );

Solution 2:

constContactButton = styled.button`
  background: ${props => props.caseStudyColor};
  color: #fff;
  font-size: 2rem;
  padding: 10px;
`;




<ContactButtoncaseStudyColor={'#004655'} />

Solution 3:

As my solution was slightly different but based on Paul's answer it might be useful for someone else.

Button Component

constContactButton = styled.button`
background: ${props => props.themeColor || '#004655'};`

Color Component

const themeColor = props.data.case_study_color;

Button

<ContactButton themeColor={themeColor}>Get in touch</ContactButton>