React自定义组件div内白线遮挡hover展开文本问题

组件内的白线是.title和.critical-icds两个子元素拼接处的渲染漏白：当前写法将圆角、背景色分别设置在两个子元素上，hover时仅取消二者相邻侧的圆角，但浏览器对元素边缘的抗锯齿处理会在拼接位置留下1px左右的透明缝隙，透出页面白底，就形成了遮挡文字的白线。
另外两个样式问题会放大这个现象：

• 给两个子元素都设置了flex: 1，纵向flex布局下的亚像素高度计算偏差会加宽缝隙
• 父容器.content没有设置统一背景和裁剪规则，无法兜底遮挡缝隙

仅需调整SCSS样式，无需修改React逻辑：

1. 将阴影、圆角属性从两个子元素上移到父容器.content，给父容器加overflow: hidden统一裁剪圆角，同时设置和ICD列表一致的背景色兜底
2. 移除两个子元素上多余的flex: 1属性，避免亚像素高度偏差
3. 删除hover状态下单独修改子元素相邻侧圆角的冗余代码，父容器会统一处理圆角效果

核心修改后的样式代码：

.DamageSizeIndicator {
  /* 其余原有外层样式保持不变 */

  .content {
    display: flex;
    flex-direction: column;
    box-shadow: $overlay-shadow;
    border-radius: $overlay-radius;
    position: absolute;
    overflow: hidden; /* 新增：统一裁剪圆角，遮挡拼接缝隙 */
    background: $colorSubtleGray; /* 新增：父容器兜底背景，避免漏白 */

    .title,
    .critical-icds {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      /* 移除原有的flex: 1 */
      /* 移除原有的border-radius: $overlay-radius */
      padding: 10px;
      transition: 0.2s linear all;

      i {
        margin-right: 0.5em;
      }
    }

    .title {
      background: $colorSubtleWhite;
      font-size: $titleFontSize;

      .condition {
        display: none;
        white-space: nowrap;
        padding-left: 0.5em;
      }
    }

    .critical-icds {
      background: $colorSubtleGray;
      font-size: $subTitleFontSize;
      display: none;
      list-style: none;
      margin: 0;
      flex-direction: column;

      /* 其余li相关原有样式保持不变 */
    }
  }

  &:hover {
    .content {
      .title {
        /* 移除原有的修改底部圆角的代码 */
        .condition {
          display: block;
        }
      }

      .critical-icds {
        /* 移除原有的修改顶部圆角的代码 */
        display: flex;
        line-height: inherit;

        li:not(:last-child) {
          margin-bottom: 1rem;
        }
      }
    }
  }

  /* 绿/黄/红三个状态的原有样式保持不变 */
}

调整后父容器统一控制外框样式，两个子元素紧密排列，不会再出现漏白白线问题。

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