如何修改ngx-notification-bar通知栏的文本样式、背景色及关闭按钮位置

由于Angular默认开启组件样式封装，推荐优先把自定义样式写在项目全局样式文件（通常为styles.css/styles.scss）中，如果仅需要在当前组件生效，可以在组件样式中配合::ng-deep使用。

1. 调整通知栏背景颜色、文本样式 #

通知栏根元素默认类为.notification-bar，不同类型的通知会追加对应的后缀类，你调用的Info类型对应.notification-bar.info，示例自定义样式如下：

/* 全局样式文件中添加 */
.notification-bar.info {
  /* 自定义背景色 */
  background-color: #1e40af !important;
  /* 自定义文本样式 */
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  padding: 12px 48px 12px 20px !important;
}

如果需要修改其他类型通知的样式，替换后缀类即可：

• 成功通知：.notification-bar.success
• 警告通知：.notification-bar.warning
• 错误通知：.notification-bar.error

2. 调整关闭按钮位置 #

关闭按钮默认类为.notification-bar-close，直接修改它的定位属性即可：

.notification-bar-close {
  position: absolute !important;
  /* 调整位置，示例为右侧20px垂直居中 */
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  /* 可选：自定义按钮大小、颜色、hover效果 */
  font-size: 20px !important;
  color: #ffffff !important;
  opacity: 0.9 !important;
}
.notification-bar-close:hover {
  opacity: 1 !important;
}

如果仅需要在当前组件生效，无需修改全局样式，可以在当前组件的CSS文件中按如下写法实现样式穿透：

:host ::ng-deep .notification-bar.info {
  /* 自定义通知栏样式 */
}
:host ::ng-deep .notification-bar-close {
  /* 自定义关闭按钮样式 */
}

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