如何将带动态值的条件样式从内联style迁移到CSS中？

你可以通过动态添加状态类名的方式把内联样式逻辑迁移到CSS里，步骤如下：

1. 替换内联style为动态类名 #

把原来的条件判断从style属性转移到className里，根据房间状态生成对应的类名：

方式一：抽成辅助函数（更清晰，适合复杂逻辑）

// 定义判断房间状态的函数
const getRoomStatusClass = () => {
  if (room.roomCapacity === room.students.length) {
    return 'room-full';
  } else if (room.students.length === 0) {
    return 'room-empty';
  }
  return 'room-partial';
};

// 组件中使用
<Card.Header 
  className={`text-center CardHeader ${getRoomStatusClass()}`}
>
  {room.roomNumber}
</Card.Header>

方式二：直接写在className中（简洁，适合简单逻辑）

<Card.Header 
  className={`text-center CardHeader 
    ${room.roomCapacity === room.students.length ? 'room-full' : 
      room.students.length === 0 ? 'room-empty' : 'room-partial'}`}
>
  {room.roomNumber}
</Card.Header>

2. 在CSS中编写对应样式 #

把原来的背景色规则写到CSS里，通过类名组合匹配状态：

/* 保留CardHeader的基础样式 */
.CardHeader {
  /* 你的其他基础样式 */
}

/* 满员状态样式 */
.CardHeader.room-full {
  background-color: #DC4C64;
}

/* 空房间状态样式 */
.CardHeader.room-empty {
  background-color: #14A44D;
}

/* 部分占用状态样式 */
.CardHeader.room-partial {
  background-color: #E4A11B;
}

这种方式把样式逻辑从JSX中剥离，让代码结构更清晰，也方便后续统一修改样式规则，符合样式与逻辑分离的前端开发最佳实践。

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