怎么设置ElNotification字体颜色

ElNotification 是一个基于 Element UI 的通知组件，你可以通过以下方式来设置它的字体颜色：

1. 使用 `custom-class` 属性来自定义该组件的 CSS 类名，然后在样式表中设置该类的字体颜色。示例代码如下：

<el-notification
  class="my-notification"
  custom-class="my-notification-color"
  :title="title"
  :message="message">
</el-notification>

.my-notification-color .el-notification__title,
.my-notification-color .el-notification__content {
  color: #fff; /* 设置字体颜色为白色 */
}

2. 直接在全局样式表中设置该组件的字体颜色。示例代码如下：

.el-notification__title, .el-notification__content {
  color: #fff; /* 设置字体颜色为白色 */
}

注意：以上两种方式都会将所有的 ElNotification 实例的字体颜色设置为相同的颜色，因此如果你需要对不同的通知组件设置不同的字体颜色，可以使用第一种方式并为每个组件设置不同的 CSS 类名。

相关问题

怎么设置element-plus中ElNotification组件的字体颜色

要设置Element Plus中ElNotification组件的字体颜色，可以使用以下CSS样式：

.el-notification__content {
  color: #FFFFFF; /*设置字体颜色*/
}

在这个示例中，我们将字体颜色设置为白色。您可以将颜色值更改为您所需的任何颜色。最后，将CSS样式应用到您的代码中，以便设置ElNotification组件的字体颜色。

ElNotification({ message: errorMessage, dangerouslyUseHTMLString: true, type: 'error', backgroundColor: '#ff4949', // 设置背景颜色为红色 color: '#ffffff' // 设置字体颜色为白色 })设置的颜色没有生效

根据您提供的代码，我看到您使用了 `backgroundColor` 和 `color` 属性来设置 `ElNotification` 的颜色。这两个属性是用来设置通知框的背景颜色和字体颜色的，而不是用来设置通知框的类型的。

要设置通知框的类型，需要使用 `type` 属性。具体使用方法如下：

ElNotification({
  message: errorMessage,
  dangerouslyUseHTMLString: true,
  type: 'error' // 设置通知框的类型为错误
})

在上述代码中，`type` 属性的值为 `'error'`，表示设置通知框的类型为错误。

如果需要修改通知框的颜色，可以使用 `type` 属性来设置不同类型的通知框颜色，或者使用 `style` 属性来设置 CSS 样式。例如：

// 设置成功通知框的颜色为绿色
ElNotification({
  message: successMessage,
  dangerouslyUseHTMLString: true,
  type: 'success' // 设置通知框的类型为成功
})

// 设置失败通知框的颜色为红色
ElNotification({
  message: errorMessage,
  dangerouslyUseHTMLString: true,
  type: 'error' // 设置通知框的类型为错误
})

// 设置自定义样式的通知框
ElNotification({
  message: '这是一个自定义样式的通知框',
  dangerouslyUseHTMLString: true,
  style: {
    backgroundColor: '#20a0ff', // 设置背景颜色为蓝色
    color: '#ffffff' // 设置字体颜色为白色
  }
})

希望这些解释对您有所帮助。