GatsbyJS中Styled Components传递fullWidth props无效问题排查

嘿，这个问题太常见啦！我一眼就瞅出了关键问题：你没有把fullWidth属性传递给内部的StyledContentBlock组件。

问题根源 #

你的ContentBlock组件确实声明了接收fullWidth这个props，但在渲染StyledContentBlock的时候，压根没把这个属性传过去。styled-components拿不到这个值，自然不会根据fullWidth的真假调整CSS样式。

看你原来的这段代码：

const ContentBlock = ({ title, fullWidth, children }) => (
  <StyledContentBlock> {/* 这里漏掉了传递fullWidth！ */}
    <ContentBlockHeading>{title}</ContentBlockHeading>
    {children}
  </StyledContentBlock>
);

修复方案 #

只需要把fullWidth props传递给StyledContentBlock就行，有两种实用方式：

方式1：显式传递指定属性

适合只需要传递个别属性的场景：

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

方式2：传递所有props（更灵活）

如果以后可能给ContentBlock加更多需要传给样式组件的属性，用扩展运算符一次性传递所有props更省心：

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

验证效果 #

修复之后，当你在页面中调用<ContentBlock title="Some other title" fullWidth>时，StyledContentBlock就能正确读取到fullWidth={true}，在tablet断点下自动应用grid-column-end:7的样式啦。

内容的提问来源于stack exchange，提问作者Ole Spaarmann