道具

Question

我正在使用来自CMS（prismic.io）的graphql查询我的反应站点的数据，以便生成彩色主题页面。我想将变量或props传递到样式化的组件中，以根据CMS发送回的内容来更改背景颜色。

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

由于用户将在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;
`;

请参见codesandbox example here。

这将是组件代码：

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

this["scene"]

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>

将道具传递给样式组件

道具

组件

3 个答案: