如何通过React Props为Card组件设置CSS伪元素颜色

问题根源 #

你遇到的问题是因为循环渲染时，Style-it生成的<style>标签里使用了全局CSS选择器（.container .card:before），后面的样式规则会覆盖前面的，最终所有卡片都应用了最后一个产品的颜色。

两种可行解决方案 #

方案1：给每个卡片添加唯一类名，隔离样式 #

通过给每个卡片绑定唯一标识（比如产品ID）生成专属类名，让Style-it的样式只作用于当前卡片：

import Style from 'style-it';
import products from './products';

const Cards = () => {
  return (
    <div className="container">
      {products.map(product => {
        // 生成唯一类名
        const uniqueCardClass = `card-${product.id}`;
        return (
          <Style key={product.id}>
            {`
              .container .${uniqueCardClass}:before {
                background-color: ${product.colour};
                /* 其他伪元素样式（如content、position等） */
              }
            `}
            <div className={`card ${uniqueCardClass}`}>
              <h3>{product.name}</h3>
              {/* 卡片其他内容 */}
            </div>
          </Style>
        );
      })}
    </div>
  );
};

方案2：使用CSS变量（更简洁高效） #

放弃Style-it，改用CSS变量绑定每个卡片的颜色，伪元素直接读取元素上的变量值，彻底避免样式冲突：

1. 先在全局CSS（比如App.css）中定义伪元素基础样式：

.container .card:before {
  content: '';
  position: absolute; /* 示例定位属性 */
  width: 20px;
  height: 20px;
  /* 使用CSS变量作为颜色值，默认值可选 */
  background-color: var(--card-color, #ccc);
}

2. 在Cards.jsx中通过内联样式给每个卡片设置变量：

import products from './products';

const Cards = () => {
  return (
    <div className="container">
      {products.map(product => (
        <div 
          key={product.id}
          className="card"
          // 绑定CSS变量到当前卡片元素
          style={{ '--card-color': product.colour }}
        >
          <h3>{product.name}</h3>
          {/* 卡片其他内容 */}
        </div>
      ))}
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Swastick Kumar Dey