我在带有样式组件的 GatsbyJS 项目中遇到了问题。我将一个 prop 传递到 ContentBlock
组件中,然后该组件应传递给样式化的 StyledContentBlock
组件,该组件应根据 prop 的值进行调整。
但是这不起作用。 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
最佳答案
尝试将 props 传递给样式组件
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>
);
关于javascript - React Gatsbyjs - 使用样式组件传递 props,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56817703/