React.js 中的样式化组件 - 道具不起作用

Question

我什么都试过了。至少，有一段时间，我找不到任何新的可能解决我的问题的方法。有可能我不明白一些事情，因为我刚刚开始使用 React.js。

重点：

我想创建一个带有背景图像的组件标题。在父组件中，我将图像 URL 作为道具，并尝试在子组件中将其用作 background-image: 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>
};

我尝试过的：

1. 将与 src 相同的 URL 放入 img 标记 - 它可以工作
2. 直接在子组件和我们 {image} 中导入 img - 它可以工作
3. 使用require() - 它不起作用
4. 使用url(~{props.image}) - 它不起作用
5. 为我的StyledHeader 设置样式时使用不同形式的道具 - 它不起作用
6. 将图像放入两个组件路径完全相同的文件夹中 - 不起作用。

当然，从 3 到 6 的所有点都不起作用，因为所有道具都不起作用。但后来我发现了。

styled-components 给出了 props 使用的例子：

background: ${props => props.primary ? "palevioletred" : "white"};

这对我没有帮助:(

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

Answer 1

它不起作用，因为您必须按照以下方式为 Styled 标头提供道具

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>
};