React Gatsbyjs - прохождение реквизита со стилизованными компонентами

Question

У меня проблема в проекте GatsbyJS со стилизованными компонентами.Я передаю реквизит в ContentBlock компонент, который затем должен быть передан в стилизованный StyledContentBlock компонент, который должен адаптироваться в зависимости от значения реквизита.

Однако это не работает.CSS никогда не меняется, и установка fullWidth в true не имеет никакого эффекта.

ContentBlock компонент:

import PropTypes from "prop-types"
import React from "react"
import styled from "styled-components"
import device from "../shared/devices"
import H2 from "./h2"

const StyledContentBlock = styled.div`
  @media ${device.mobile} {
    grid-column-start: 1;
    grid-column-end: 3;
  }

  @media ${device.tablet} {
    grid-column-start: 1;
    grid-column-end: ${props => props.fullWidth ? 7 : 4};
  }
`

const ContentBlockHeading = styled(H2)`
  @media ${device.mobile} {
    margin-bottom: 20px;
  }

  @media ${device.tablet} {
    margin-bottom: 20px;
  }

  @media ${device.desktop} {
    margin-bottom: 22px;
  }
`

const ContentBlock = ({ title, fullWidth, children }) => (
  <StyledContentBlock>
    <ContentBlockHeading>{title}</ContentBlockHeading>
    {children}
  </StyledContentBlock>
);

ContentBlock.propTypes = {
  title: PropTypes.string,
  fullWidth: PropTypes.bool,
  children: PropTypes.node.isRequired,
}

ContentBlock.defaultProps = {
  title: '',
  fullWidth: false,
}

export default ContentBlock

Использование его на странице:

import React from "react"

import Layout from "../components/layout"
import ContentBlock from "../components/content-block"

const IndexPage = () => (
  <Layout>
    <ContentBlock title="Some title">
    </ContentBlock>
    <ContentBlock title="Some other title" fullWidth>
    </ContentBlock>
  </Layout>
)

export default IndexPage

Я сошел с ума.Что здесь происходит?Я также пытался не использовать сопоставление с образцом и напрямую обращаться к объекту реквизита.Без эффекта:

const ContentBlock = (props) => (
  // etc

Answer 1

попробуйте передать реквизиты в стилизованный компонент

const ContentBlock = (props) => (
  <StyledContentBlock {...props}>
    <ContentBlockHeading>{props.title}</ContentBlockHeading>
    {props.children}
  </StyledContentBlock>
);

или пройти с деструктурой

const ContentBlock = ({ title, fullWidth, children }) => (
  <StyledContentBlock fullWidth={fullWidth}>
    <ContentBlockHeading>{title}</ContentBlockHeading>
    {children}
  </StyledContentBlock>
);

Answer 2

Вы не передаете реквизит StyledContentBlock, попробуйте это:

const ContentBlock = ({ title, fullWidth, children }) => (
  <StyledContentBlock fullWidth={fullWidth}>
    <ContentBlockHeading>{title}</ContentBlockHeading>
    {children}
  </StyledContentBlock>
);

Как видно из документов: https://www.styled -components.com / docs / basics # adapting-ориентированный на реквизите