将自定义类/样式传递给 Gatsby (React) 中的样式化组件

Posted 2023-03-15

【中文标题】将自定义类/样式传递给 Gatsby (React) 中的样式化组件

【英文标题】：Passing a custom class/style to a styled-component in Gatsby (React)

【发布时间】：2020-02-09 19:15:29

【问题描述】：

我为我的 gatsby 项目创建了以下样式组件。

import React from "react"
import styled,  css  from 'styled-components'


const Button = styled.div`
    background-color: #4E58F5;
    width: 200px;
    padding: 20px;
    margin-right: 30px;
    margin-top: 30px;
    border-radius: 30px;
    color: #FFFFFF;
    transition: background-color 0.25s ease;

  $props => props.primary && css`
    background-color: #FFF;
    color: red;
  `
`;

export default props => (
    <Button>props.buttonText</Button>
)

我没有发现文档中的示例足够清晰或一致，无法理解我应该如何将“主要”选项传递给我的组件。

我正在尝试在我的index.js 页面上执行以下操作。 Button 呈现，但主要单词没有效果。我在这里想念什么？

<Button primary buttonText="Submit" />

【问题讨论】：

你看过styled-components docs吗？

是的 - 没有明确的例子正是我想要的。我从另一个答案中弄清楚了。

【参考方案1】：

您要导出的组件无法识别 primary 属性，因此无法将其传递给 Button 元素。您可以通过导出样式组件本身或将无法识别的道具传递给 Button 来解决此问题。

const Button = styled.div`
  [...]
`;

export default Button;

或

export default (buttonText, ...props)=>(
  <Button ...props>buttonText</Button>
);

【讨论】：

谢谢！所以如果我选择第一个选项，下面的代码会去哪里？ export default props => ( <Button>props.buttonText</Button> ) - 即 buttonText 和处理的按钮结构在哪里？

不，在第一个示例中，文件以export default Button 行结尾，您必须将呼叫站点更改为<Button primary>Submit</Button>。在第二个示例中，您可以继续将其称为 <Button primary buttonText='submit'/>，但您必须更改要导出的函数。