如何解决React + Socket.IO应用聊天仅首个实例正常显示的问题

这不是React组件的逻辑错误，是跨应用的全局CSS样式冲突导致的布局失效，两个实例表现不一致的本质是样式上下文的差异：

• 第二个应用实例通常引入了带全局标签重置规则的UI组件库，会给所有<p>标签强制设置width: 100%的块级样式，部分规则甚至会加上display: block !important的强制声明，直接覆盖代码里写的display: inline效果，让原本随文字长度收缩的消息块撑满整个父容器
• 原本用来将自身发送消息推到容器右侧的margin-left: auto属性，需要在Flex布局中配合非全宽元素才能生效。一旦消息块被强制撑满宽度，自动边距会完全失效，消息块就会靠左对齐，和其他用户的消息排版混在一起
• 通用边距规则冲突：给所有.content类统一设置的margin-right: 10px，会让靠右对齐的自身消息块和容器右侧产生不必要的空隙，进一步放大视觉上的错位感

1. 锁定消息块的宽度规则 #

避免全局样式覆盖排版，给消息块增加宽度适配规则，就算display属性被强制覆盖也不会撑满容器：

.content {
  margin-right: 10px;
  /* 新增：强制按内容收缩宽度，限制最大占比避免长消息撑满整行 */
  width: fit-content;
  max-width: 70%;
}

2. 重构Flex对齐逻辑 #

不再依赖单独元素的自动边距控制位置，通过容器级对齐规则实现消息左右排版，降低对单个元素属性的依赖：

.messageContainer {
  display: flex;
  /* 长消息场景下顶对齐，避免用户名和消息块垂直错位 */
  align-items: flex-start;
  margin: 8px 0;
}

/* 自身发送的消息容器单独设置右对齐 */
.messageContainer:has(.user) {
  justify-content: flex-end;
}

.user {
  background-color: rgba(255, 255, 255, 0.712);
  display: inline;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #888888;
  /* 删除原本依赖自动边距的规则，交给容器对齐控制位置 */
  margin: 0;
}

3. 修正用户名排版规则 #

给用户名元素加上宽度收缩规则，避免被全局样式强制撑满打乱排版：

.sender {
  color: rgb(156, 156, 156);
  width: fit-content;
  font-size: 12px;
  margin-top: 4px;
}

如果需要兼容不支持:has()选择器的老旧浏览器，可以在组件内根据消息发送者判断，给对应容器动态加上右对齐的类名，实现等价效果。

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