React中如何在Styled Components的HTML标签中传入动态CSS颜色？

你的问题出在React内联样式的语法上——React要求style属性接收的是JavaScript对象，而非原生CSS的字符串格式，同时CSS属性名需要转换为驼峰命名（比如backgroundColor替代background-color）。

1. 直接在JSX中编写内联样式对象 #

把你的代码修改成下面这样即可生效：

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

• 外层的{}是JSX的插值语法，用来嵌入JavaScript表达式
• 内层的{}是样式对象，键名用驼峰式的backgroundColor，值直接传入你的color变量

2. 提前定义样式对象（可选，更清晰） #

如果样式逻辑复杂，也可以提前定义样式对象再传入：

const Card = ({img, date, title, category, color, id}) => {  
    const navigate = useNavigate();
    // 提前定义样式对象
    const categoryStyle = {
        backgroundColor: color
    };

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

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

补充：如果使用styled-components的优化写法 #

因为你引入了import * as C from './styles'，推测用了styled-components，也可以通过props传递颜色值给样式组件，让代码更符合styled-components的规范：
比如在你的styles.js中修改Cat组件或者单独定义一个CategoryTag组件：

// styles.js
import styled from 'styled-components';

export const Cat = styled.div`
  // 原有样式...
  .category-tag {
    background-color: ${props => props.tagColor};
    // 其他样式...
  }
`;

然后在Card组件中使用：

<C.Cat tagColor={color}>
  <p>{date}</p>
  <p id='cat' className='category-tag'>{category}</p>
</C.Cat>

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