我有一个react应用程序，在那里我通过一个API接收，一个类别。在那个类别中，我有一个css颜色被发送的"颜色"。
在"category"中，我希望传递在api中接收的信息中发送的css颜色，因此，我必须在p id ="cat"中传递带有"color"的颜色

import * as C from './styles';

import { useNavigate } from 'react-router-dom';

const Card = ({img, date, title, category, color, id}) => {  
    const navigate = useNavigate();

    const handleSinglePost = () => {
        navigate(`/singlepost/${id}`)
    }

  return (
    <C.Card onClick={handleSinglePost}>
        <C.ImgContainer>
            <img src={img} alt="" />
            <C.Cat>
                <p> {date}</p>
                <p id='cat'> {category}</p>
            </C.Cat>
            <h2>{title}</h2>
        </C.ImgContainer>
    </C.Card>
    )
}

export default Card;

也就是说，在理论上把色彩作为背景色风格传递给印刷品
比如：

<C.Cat>
  <p> {date}</p>
  <p id='cat'style={background-color: color}> {category}</p>
</C.Cat>

它当然不是那样工作的，但它是一个例子，我希望它是什么，以及我如何试图说明