el-dialog 样式穿透 修改dialog样式 怎么修改

在 Element UI 中使用 `el-dialog` 组件时，如果需要修改 `dialog` 样式，可以使用 `::v-deep` 或 `/deep/` 穿透组件样式。下面是一个例子：

/* 使用 ::v-deep 穿透 el-dialog 样式 */
::v-deep .el-dialog {
  border-radius: 10px;
}

/* 或者使用 /deep/ 穿透 el-dialog 样式 */
/deep/ .el-dialog {
  border-radius: 10px;
}

需要注意的是，使用 `/deep/` 穿透样式可能会影响到其他组件的样式，所以建议使用 `::v-deep`。另外，如果需要修改 `dialog` 的部分样式，比如标题、关闭按钮等，可以使用 `slot` 插槽来自定义。例如：

<el-dialog>
  <span slot="title">自定义标题</span>
  <span slot="close">X</span>
  <p>对话框内容</p>
</el-dialog>

在上面的例子中，使用了 `slot` 插槽来自定义对话框的标题和关闭按钮。

相关问题

el-dialog--center

el-dialog--center是一个CSS类选择器，用于修改Vue.js中Element UI组件库的弹框（dialog）组件的样式。通过添加/deep/前缀，可以穿透组件的作用域限制，使得样式修改能够生效。

具体来说，/deep/用于穿透scoped样式，使得样式可以作用于子组件。在你提供的代码中，/deep/被用于修改.el-dialog.el-dialog--center和.el-dialog--center .el-dialog__body这两个类的样式。

1. 修改弹框边框圆角：

/deep/ .el-dialog.el-dialog--center {
  border-radius: 8px;
}

2. 去掉弹框内容的默认padding值：

/deep/ .el-dialog--center .el-dialog__body {
  padding: 0px;
  text-align: center;
}

这样，你可以通过添加/deep/前缀来修改el-dialog--center类的样式，实现自定义的效果。

.el-dialog__body修改不生效

可能有多种原因导致修改不生效，以下是几个可能的解决方案：

1. 确保你的样式定义在.el-dialog__body的样式之后，否则可能被覆盖。

2. 确保你使用的是正确的选择器，你可以使用浏览器的开发者工具检查样式是否被正确应用。

3. 确保你的样式没有被其他样式覆盖，你可以通过更具体的选择器或使用!important来解决这个问题。

4. 如果你使用了scoped样式，那么你需要在样式中添加/deep/或>>>来穿透作用域限制。

希望这些解决方案对你有所帮助。