Quasar Notify组件：如何修改关闭按钮文本颜色？

方法1：自定义关闭按钮的HTML内容 #

既然你已经开启了html: true，可以直接把closeBtn设置为带内联样式的HTML元素，直接控制文本颜色：

return Notify.create({
  type: "positive",
  timeout: 0,
  html: true,
  message: "the message",
  closeBtn: '<span style="color: white;">关闭</span>', // 自定义带样式的关闭按钮
  textColor: "white",
});

方法2：通过CSS类覆盖默认样式 #

如果不想用内联样式，可以给通知添加自定义类，再用CSS选中关闭按钮修改颜色：

1. 修改JS代码，添加自定义类名：

return Notify.create({
  type: "positive",
  timeout: 0,
  html: true,
  message: "the message",
  closeBtn: true,
  textColor: "white",
  classes: "custom-notify" // 添加自定义类
});

2. 编写对应的CSS：

.custom-notify .notify-close-btn {
  color: white !important; /* 用!important确保覆盖默认样式 */
}

这两种方法都能解决关闭按钮文本颜色无法修改的问题，按需选择即可。

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