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

Question

我为我的 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>
)

我发现文档中的示例不够清晰或一致，无法理解我应该如何将 "primary" 选项传递给我的组件。

我正尝试在我的 index.js 页面上执行以下操作。 Button 呈现，但主词无效。我在这里错过了什么？

<Button primary buttonText="Submit" />

Answer 1

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

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

export default Button;

或

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

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

Passing a custom class/style to a styled-component in Gatsby (React)

reactjs

gatsby

styled-components