import {ElNotification} from 'element-plus' ElNotification({ message: successMessage, dangerouslyUseHTMLString: true, type: 'success', }) .el-notification__success { background-color: #67C23A; color: #fff; } .el-notification__error { background-color: #F56C6C; color: #fff; }为什么样式没有覆盖

根据你提供的代码，我发现你将样式定义放在了 `ElNotification` 的调用之后，这样是无法实现样式覆盖的。

你需要将样式定义放在 `ElNotification` 调用之前，或者将样式定义放在样式表中并在 HTML 文件中引入样式表，这样才能实现样式覆盖。

例如：

.el-notification__success {
  background-color: #67C23A;
  color: #fff;
}

.el-notification__error {
  background-color: #F56C6C;
  color: #fff;
}

请确保将样式定义放在 `ElNotification` 调用之前或者在 HTML 文件中正确引入样式表。

相关问题

怎么设置element-plus ElNotification({ message: errorMessage, dangerouslyUseHTMLString: true, type: 'warning', })背景,字体,边框颜色

你可以通过以下方式来设置ElNotification的背景、字体和边框颜色：

1. 设置背景颜色：

你可以使用CSS来设置ElNotification的背景颜色，例如：

.el-notification__group {
  background-color: #f0f0f0; /* 设置背景颜色 */
}

2. 设置字体颜色：

同样可以使用CSS来设置ElNotification的字体颜色，例如：

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

3. 设置边框颜色：

也可以使用CSS来设置ElNotification的边框颜色，例如：

.el-notification__group {
  border: 1px solid #ccc; /* 设置边框 */
}

注意：以上CSS代码仅为示例，你需要根据自己的需求进行调整。此外，还可以使用element-plus提供的props进行样式设置，例如：

<el-notification
  :title="'提示'"
  :message="'这是一条警告信息'"
  :type="'warning'"
  :dangerously-use-html-string="true"
  :offset="50"
  :duration="3000"
  :show-close="true"
  :custom-class="'my-notification'"
  :position="'bottom-right'"
  :z-index="99999"
  :style="{backgroundColor: '#f0f0f0', color: '#000', border: '1px solid #ccc'}"
></el-notification>

在style中设置对应的属性即可。

ElNotification({ message: successMessage, dangerouslyUseHTMLString: true, type: 'success',这样自定义样式引入乱码

如果你在 Element Plus Notification 组件中使用了自定义 HTML 字符串，并且同时开启了 `dangerouslyUseHTMLString`，那么你需要确保你的 HTML 代码中使用的所有样式都是有效的 CSS 样式，而不是一些非标准的样式或未识别的属性，否则可能会导致样式混乱或乱码的问题。

如果你的样式表中包含了一些非标准的样式或未识别的属性，可以尝试使用标准的 CSS 属性来替换它们，或者使用内联样式来覆盖它们。例如，如果你的样式表包含了以下样式：

.my-custom-style {
  font-family: '微软雅黑';
  -webkit-box-shadow: 0 0 10px #ccc;
  -moz-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
}

你可以将其替换为以下标准的 CSS 样式：

.my-custom-style {
  font-family: '微软雅黑', sans-serif;
  box-shadow: 0 0 10px #ccc;
}

如果你的样式表中包含了一些无法替换的样式，你可以尝试使用内联样式来覆盖它们。例如，如果你的样式表包含了以下样式：

.my-custom-style {
  background-color: #f00;
  color: #0f0;
}

你可以在 Element Plus Notification 组件中使用内联样式来覆盖它们：

ElNotification({
  message: '<div style="background-color: #f00; color: #0f0;">' + successMessage + '</div>',
  dangerouslyUseHTMLString: true,
  type: 'success'
});

这样就能确保你的样式能够正确地应用到 Element Plus Notification 组件中，而不会出现乱码或混乱的情况。