Передача реквизита в styled-компоненты

Question

Я запрашиваю данные для моего сайта реакции, используя graphql из моей CMS (prismi c .io), чтобы получить цветные тематические страницы. Я хочу передать переменную или реквизит в свой стилизованный компонент, чтобы изменить цвет фона на основе того, что отправлено обратно из CMS.

В следующем примере мой запрос graphql вернет HEX, который был введен пользователь, тогда это будет применено к кнопкам et c для темы этой страницы.

Цвет может и будет меняться от страницы к странице, поскольку пользователь будет выбирать его в CMS.

Любая помощь будет принята с благодарностью. Пример кода ниже:

Реквизит

props.data.case_study_color

Компонент

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

Answer 1

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




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

Answer 2

Вы можете сделать следующее.

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

См. пример кода и коробки здесь .

Вот код компонента:

  .....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>
  );

Answer 3

Поскольку мое решение немного отличалось, но, основываясь на ответе Пола, оно могло бы пригодиться кому-то еще.

Компонент кнопки

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

Компонент цвета

const themeColor = props.data.case_study_color;

Кнопка

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