element-plus的ElMessageBox怎么修改el-message-box__message的样式？

Question

不生效

这块要怎么写才能让box里面的el-message-box__message也生效？

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

Element Plus 的 ElMessageBox 组件使用了 scoped 选择器，导致你在外部无法直接修改其内部元素的样式。

要修改 el-message-box__message 的样式，你可以使用 ::v-deep 或 >>> 选择器来访问 scoped 选择器的内部元素。

例如：

.el-message-box__message {
  /* your styles here */
}

或者使用 ::v-deep 选择器：

::v-deep .el-message-box__message {
  /* your styles here */
}

这两种方法都可以访问 scoped 选择器的内部元素，并修改其样式。

如果你使用的是 Vue 3.x，需要使用 ::v-deep 选择器。如果你使用的是 Vue 2.x，可以使用 >>> 选择器。

请注意，这种方法需要在组件的样式文件中定义样式，而不是在外部 CSS 文件中定义。