[英]React Gatsbyjs - Passing props with styled components
我在帶有樣式化組件的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
我很機智。 這里發生了什么? 我還嘗試了不使用模式匹配並直接訪問props對象。 無效:
const ContentBlock = (props) => (
// etc
嘗試將道具傳遞給樣式化的組件
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>
);
您不會將任何道具傳遞給StyledContentBlock
,請嘗試以下操作:
const ContentBlock = ({ title, fullWidth, children }) => (
<StyledContentBlock fullWidth={fullWidth}>
<ContentBlockHeading>{title}</ContentBlockHeading>
{children}
</StyledContentBlock>
);
如在文檔中所示: https : //www.styled-components.com/docs/basics#adapting-based-on-props
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.