时间戳

首页 > 解决方案 > 将自定义类/样式传递给 Gatsby (React) 中的样式化组件

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

问题描述

我为我的 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" />

标签： reactjsgatsbystyled-components

解决方案

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

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

export default Button;

或者

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

推荐阅读