src/packages/noticebar/noticebar.scss (6)

54-56: 图标颜色建议改为继承，避免过度绑定主题变量

目前强制将左侧图标颜色设为 $noticebar-color。为增强可定制性（例如组件 props/自定义主题/行内样式覆盖），建议让图标使用继承色，从父容器的 color 统一接管，这样既满足“与文本统一颜色”的目标，又不提高选择器特异性，便于外部覆盖。

可选修改（更弹性）：

-      .nut-icon {
-        color: $noticebar-color;
-      }
+      .nut-icon {
+        color: inherit;
+      }

---

66-70: 同右侧图标：使用继承色更利于主题/样式覆盖

与左侧图标一致，这里建议避免直接写死 $noticebar-color，使用继承能与父级 color 同步，减少未来主题扩展/用户自定义颜色时的阻力。

可选修改：

       .nut-icon {
         width: 12px;
         height: 12px;
-        color: $noticebar-color;
+        color: inherit;
       }

---

73-77: 垂直居中对 wrap 生效范围有限，请确认预期场景

给 &-wrap 增加 align-items: center 能改善 wrapable/center 模式下（内容非绝对定位）的垂直对齐；但在默认滚动场景中 .nut-noticebar-box-wrap-content 是 position: absolute，flex 对齐不生效。这一改动可能对“跑马灯”模式没有实际居中效果。

请确认在以下模式下是否达到预期：

• 默认滚动（play / play-infinite）
• wrapable
• center

如需在绝对定位场景也精确居中，可能需要：

• 将内容容器改为相对定位 + inline-flex，或
• 在绝对定位下使用 top: 50% + translateY(-50%)，或
• 避免绝对定位，改为 flex 容器内滚动。

---

82-86: 内容文本重复设色，可能增加选择器特异性导致不易覆盖

外层 .nut-noticebar-box 已设置 color: $noticebar-color；此处再给 .nut-noticebar-box-wrap-content 指定颜色属于冗余，且会提升特异性，降低用户通过 props/主题/行内样式覆盖文本颜色的可能性。建议删除或改为继承。

更简化的做法：

-        color: $noticebar-color;

若需保底，亦可显式写：

+        color: inherit;

---

120-128: 纵向样式的左右图标未同步颜色策略，建议与横向一致

纵向变体 .nut-noticebar-vertical 下的 .nut-noticebar-box-left-icon / -right-icon 未对子级 .nut-icon 设色。为保持“图标与内容文本统一颜色”的目标，建议同横向一致，使用 color: inherit（或若坚持主题变量，也可用 $noticebar-color）。

示例修改（建议使用继承，便于外部覆盖）：

 .nut-noticebar-vertical {
   ...
   .nut-noticebar-box-left-icon {
     ...
     display: flex;
     align-self: center;
+    .nut-icon {
+      color: inherit;
+    }
   }
   ...
   .nut-noticebar-box-right-icon {
     align-self: center;
     display: flex;
     justify-content: center;
     width: $noticebar-right-icon-width;
     margin-left: $noticebar-icon-gap;
+    .nut-icon {
+      color: inherit;
+    }
   }
 }

Also applies to: 152-158

---

1-14: 整体变更方向合理，符合“图标与文本颜色统一、垂直对齐优化”的目标

本次改动围绕颜色一致性与对齐性进行的小幅修正，风险较低，方向合理。上面给出的建议主要为了提升可定制性与覆盖性，不是必须项。

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.