Передача пользовательского класса / стиля в стилевой компонент в 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>
)

Я не нашел примеров в документации достаточно ясными или последовательными, чтобы понять, как я должен передавать«основной» вариант для моих компонентов.

Я пытаюсь сделать следующее на моей странице index.js. Кнопка рендеринга, но основное слово не имеет никакого эффекта. Что мне здесь не хватает?

<Button primary buttonText="Submit" />

Answer 1

Компонент, который вы экспортируете, не распознает свойство primary и, следовательно, не может передать его элементу Button. Вы можете исправить это, экспортировав сам стилизованный компонент или передав нераспознанные реквизиты в Button.

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

export default Button;

ИЛИ

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