Javascript React.js-props中的样式化组件不'；行不通

我什么都试过了。至少，有一段时间，我找不到任何新的可能解决我问题的方法。有一种可能是我不理解某些东西，因为我正处于React.js冒险的开始

切中要害：

我想创建一个带有背景图像的组件标题。在父组件中，我将一个图像URL作为道具，并尝试在子组件中将其用作

背景图像：URL（）

。当然，这是行不通的。另外，我试着设置一种颜色，但它也不起作用

这是我的父组件：

import Hero from '../Hero';
import image from './cat.jpg'

function Main() {
    
    return <div>
        <Hero title="Only fluff photos" image={image} color="#f0f"/>
    </div>
};

import styled from 'styled-components';

const StyledHeader = styled.header`
    display: flex;
    width: 100%;
    height: 432px;
    background-image: url(${(props) => props.image});
    background-color: ${props => props.color ? props.color : "#ff0"};
`

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

这对我没有帮助：(

---

提前感谢您的帮助！我不知道我做错了什么。

这不起作用，因为您必须按如下方式为样式标题提供道具

const StyledHeader = styled.header`
display: flex;
width: 100%;
height: 432px;
background-image: url(${(props) => props.image});
background-color: ${props => props.color ? props.color : "#ff0"};
`

function Hero(props) {
  return <StyledHeader image={props.image} color={"value"} {...otherProps}>
      <h1>{props.title}</h1>
      <img src={props.image} alt="test cat" />
  </StyledHeader>
};

constyledheader=styled.header`
显示器：flex；
宽度：100%；
身高：432px；
背景图像：url（${（props）=>props.image}）；
背景色：${props=>props.color？props.color:“#ff0”}；
`
功能英雄（道具）{
返回
{props.title}
};

非常感谢！它很有效！

const StyledHeader = styled.header`
display: flex;
width: 100%;
height: 432px;
background-image: url(${(props) => props.image});
background-color: ${props => props.color ? props.color : "#ff0"};
`

function Hero(props) {
  return <StyledHeader image={props.image} color={"value"} {...otherProps}>
      <h1>{props.title}</h1>
      <img src={props.image} alt="test cat" />
  </StyledHeader>
};