CODEWITHSUNDEEP
javascriptcssreactjsstyled-components
Michael
Michael

Reputation: 817

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 change the background color based on what is sent back from the CMS.

In the below example, my graphql query will return a HEX that has been inputted by the user, this would then be applied to buttons etc to theme that page.

The colour can and will change from page to page as the user will be selecting it within the CMS.

Any help would be appreciated. Code example below:

Props

props.data.case_study_color

Component

const ContactButton = styled.button `
  background: #004655;
  color: #fff;
  font-size: 2rem;
  padding: 10px;
`;

Upvotes: 2

Views: 10862

Answers (3)

Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

You could do the following.

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

See codesandbox example here.

This would be the component code:

  .....component

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

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

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

Upvotes: 7

Michael
Michael

Reputation: 817

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

Button Component

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

Color Component

const themeColor = props.data.case_study_color;

Button

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

Upvotes: 0

ramamoorthy_villi
ramamoorthy_villi

Reputation: 2055

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




<ContactButton caseStudyColor={'#004655'} />

Upvotes: 2

Related Questions