将道具传递给样式部件

Question

我正在使用来自CMS (prismic.io)的graphql查询我的react站点的数据，以便生成颜色主题页面。我想传递一个变量或道具到我的样式组件，以改变背景颜色是根据什么是从CMS发回。

在下面的示例中，我的graphql查询将返回用户输入的HEX，然后将其应用于按钮等主题页面。

颜色可以和将改变从一个页面到一个页面，因为用户将选择它在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: #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 2

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




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

Answer 3

由于我的解决方案略有不同，但根据保罗的回答，它可能对其他人有用。

按钮组件

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

彩色分量

const themeColor = props.data.case_study_color;

Button

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