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

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

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

<Button primary buttonText="Submit" />

Answer 1

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

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

export default Button;

OR

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

在Gatsby中将自定义类/样式传递给样式化组件（反应）

1 个答案: