React变量类名样式设置：聊天应用消息区分颜色需求

根据你的需求——当前用户消息背景设为蓝色，其他用户消息背景设为红色，结合你将消息组件类名设为发送者username的设定，这里给出具体实现方案：

步骤1：优化HTML结构 #

给所有消息组件添加一个通用类（比如.chat-message），同时保留发送者的username作为额外类名，既方便统一设置通用样式，也能精准区分不同用户：

<!-- 其他用户（alice）的消息 -->
<div class="chat-message alice">今天天气不错！</div>
<!-- 当前用户（john）的消息 -->
<div class="chat-message john">是啊，适合出门散步～</div>

步骤2：编写CSS样式 #

先统一设置所有消息的通用样式，再分别针对当前用户和其他用户配置背景色：

/* 所有消息的通用样式 */
.chat-message {
  padding: 8px 12px;
  border-radius: 6px;
  margin: 4px 0;
  color: #fff; /* 文字设为白色，和背景形成清晰对比 */
}

/* 其他用户的消息：背景红色 */
.chat-message:not(.john) {
  background-color: red;
}

/* 当前用户的消息：背景蓝色 */
.chat-message.john {
  background-color: blue;
}

关键说明 #

• 你之前的代码把当前用户消息的背景设为红色，和需求刚好相反，需要调整颜色值。
• 使用:not()伪类可以快速排除当前用户的类，给其他所有用户的消息设置默认红色背景。
• 通用类.chat-message能让你统一控制消息的内边距、圆角、间距等样式，避免重复代码。

如果你的消息组件类名直接就是username（没有通用类），也可以这样写CSS：

/* 所有消息的基础样式 */
[class] {
  padding: 8px 12px;
  border-radius: 6px;
  margin: 4px 0;
  color: #fff;
}

/* 当前用户（john）的消息 */
.john {
  background-color: blue;
}

/* 其他用户的消息 */
[class]:not(.john) {
  background-color: red;
}

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