el-Notification 样式穿透

el-Notification 是 Element UI 组件库中的通知组件，它的样式可以通过 CSS 穿透的方式进行修改。

穿透方式如下：

1.在样式中使用 ::v-deep 伪元素来穿透样式。

例如，修改通知框背景颜色和字体颜色：

/* 通过 ::v-deep 穿透样式 */
.el-notification__content ::v-deep {
  background-color: #f0ad4e;
  color: #fff;
}

2.在样式中使用 /deep/ 或 >>> 运算符来穿透样式。

例如，修改通知框的圆角大小：

/* 通过 /deep/ 或 >>> 运算符穿透样式 */
.el-notification__group /deep/ .el-notification__content {
  border-radius: 10px;
}

需要注意的是，以上的样式穿透方式可能会有一定的兼容性问题，建议在实际使用中进行测试。

相关问题

el-Notification 在body上 样式无法穿透 怎么解决

如果 `el-Notification` 组件是挂载在 `body` 上，那么使用 CSS 穿透的方式可能会失效。这是因为 `el-Notification` 组件是在 `body` 中动态生成的，而 `body` 是全局的根元素，CSS 穿透的作用范围无法达到。

解决这个问题的方法是在 `el-Notification` 组件上设置一个唯一的 `class`，然后在样式中通过这个 `class` 来修改样式。

例如，给 `el-Notification` 组件设置一个 `class` 为 `my-notification`：

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

然后在样式中通过这个 `class` 来穿透样式：

.my-notification .el-notification__content {
  background-color: #f0ad4e;
  color: #fff;
}

这样就可以成功穿透 `el-Notification` 组件的样式了。

.my-notification-warning .el-notification__content 选择器是用来选中通知组件中的内容区域。怎么跟换选择器

如果你想要修改其他元素的样式，可以使用不同的 CSS 选择器来选中这些元素。选择器是一种用来选中 HTML 元素的模式，可以根据元素的标签名、类名、ID 等属性来进行匹配。

如果你想要选中其他元素，可以根据这些元素的标签名、类名、ID 等属性来编写不同的 CSS 选择器。比如，如果你想要选中通知组件的标题，可以使用 `.el-notification__title` 类名来选中，例如：

.my-notification-warning .el-notification__title {
  color: #ff0000; /* 设置标题颜色为红色 */
}

这样就可以将通知组件的标题颜色设置为红色。如果你想要选中其他元素，可以根据元素的标签名、类名、ID 等属性来编写不同的 CSS 选择器，然后在选择器中添加需要修改的样式属性即可。