React.js中Styled-components自定义props样式传参未生效问题求助

你遇到的styled组件props全失效的问题，本质是props传递链路在自定义Hero组件这里断了，和styled-components的语法写法没有任何关系。
梳理下当前的代码执行逻辑就会明白问题在哪：

1. 父组件Main确实把image、color、title三个值传给了Hero组件
2. Hero内部也正常接收到了这三个值，并且用title、image渲染了嵌套的h1和img标签——这也是为啥你之前测试img标签能正常加载图片的原因
3. 但Hero返回的<StyledHeader>标签上，没有挂载任何从父组件接收到的props，作为独立React组件的StyledHeader本身，根本拿不到image、color这两个值，自然样式模板里的所有props读取逻辑都会失效。
   你之前排查的时候试过所有styled的props写法都没用，甚至直接照搬官方示例也不生效，都是因为这个传递链路断开的问题，不是styled本身的读取逻辑有问题。

两种改法任选其一，改动量非常小：

• 全量透传所有props：用展开运算符把Hero接收到的所有值，直接挂到StyledHeader标签上

  // Hero组件内的返回值，关键改动就是给StyledHeader加上{...props}
  return <StyledHeader {...props}>
      <h1>{props.title}</h1>
      <img src={props.image} alt="test cat" />
  </StyledHeader>;
  

• 定向传递样式依赖的props：如果不想把所有props都透传下去，也可以单独把样式需要的属性手动挂到StyledHeader上

  return <StyledHeader image={props.image} color={props.color}>
      <h1>{props.title}</h1>
      <img src={props.image} alt="test cat" />
  </StyledHeader>;
  

改完之后可以在样式模板里临时加个打印语句，确认styled组件能正常收到props：

background-image: url(${(props) => {
    console.log('styled组件实际接收的props:', props);
    return props.image
}});

控制台能正常打印出image、color的值之后，背景图、自定义背景色的样式就会正常生效，不需要调整之前写的styled样式逻辑。

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