React中如何根据Prop值动态修改标签元素的背景样式？

问题背景 #

使用React父子组件展示库存报告，通过props传递卡片信息，tag属性值为daily/weekly/monthly/yearly，需根据tag动态修改标签背景色：

• daily：黑色（对应SCSS的$text-color）
• monthly：红色
• yearly：指定颜色（复用SCSS的$primary-color）
• 要求复用现有SCSS变量，不采用内联条件渲染，此前尝试className实现未成功。

步骤1：统一Tag大小写（避免匹配错误） #

数据中tag存在大写开头的情况（如Daily），先统一转为小写，确保类名匹配：

// 预处理数据（也可在渲染时实时转换）
const normalizedReportData = ReportData.map(item => ({
  ...item,
  tag: item.tag.toLowerCase()
}));

步骤2：在SCSS中定义Tag对应类，复用变量 #

在SCSS文件中为每个tag类绑定背景色，直接使用已有变量：

// 新增monthly标签的红色变量（按需添加）
$monthly-tag-color: #ff0000;

.tag {
  // 标签基础样式
  padding: 4px 12px;
  border-radius: 4px;
  color: $text-color-light;
}

// 各tag对应的背景色
.tag.daily {
  background-color: $text-color;
}

.tag.monthly {
  background-color: $monthly-tag-color;
}

.tag.yearly {
  background-color: $primary-color;
}

.tag.weekly {
  // 自定义weekly标签颜色，示例复用secondary变量
  background-color: $secondary-color;
}

步骤3：React子组件动态绑定className #

修改子组件的标签元素，将小写后的tag值作为类名拼接在基础类后：

<>
  {props.details.map((value, index) => {
    const lowerCaseTag = value.tag.toLowerCase();
    return (
      <div className='report-container' key={index}>
        <div className="report-header">
          <h1>{value.title}</h1>
          <p className="date">{value.creation_date}</p>
        </div>
        <div className="tag-container">
          {/* 动态拼接类名：基础类 + 转换后的tag类 */}
          <span className={`tag ${lowerCaseTag}`}> {value.tag} </span>
        </div>
        <div className="report-card-deets">
          <p className="file-size"> {value.file_size} </p>
          <button>Download</button>
        </div>
      </div>
    );
  })}
</>

此前className实现失败的常见原因 #

• Tag大小写不匹配（如数据中是Daily，SCSS类名是.daily）
• 类名拼接语法错误（未正确使用模板字符串或空格分隔类名）

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