修改element $prompt的文字样式

代码如下

this.$prompt('确认重置吗? 您需要输入 <strong>重置</strong> 确认操作', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: /^重置$/,
      inputErrorMessage: '请输入正确的确认信息',
      dangerouslyUseHTMLString: true,
      customClass: 'reset-message-box',
    }).then(() => {
      ...
});

这里写了很多重置样式，但是不生效

<style lang="less">
.reset-message-box {
  background-color: #0e214b;
  border: 1px solid rgba(20, 98, 248, 0.3);
  /deep/ .el-input__inner {
    background: rgba(7, 79, 124, 0.9);
    color: #03a5eb;
    border-color: #03a5eb;
  }
  /deep/ .el-button:first-of-type {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
  }
  /deep/ .el-message-box__title {
    color: #fff;
  }
  /deep/ .el-message-box__headerbtn {
    color: #fff;
  }
}
</style>

正确的代码

.reset-message-box {
  background-color: #0e214b;
  border: 1px solid rgba(20, 98, 248, 0.3);
  .el-message-box__title {
    color: #fff;
  }
  .el-message-box__close {
    color: #fff;
  }
  .el-message-box__content {
    .el-input__inner {
      background: rgba(7, 79, 124, 0);
      color: #fff;
      border-color: rgba(20, 98, 248, 0.3);

      &:focus {
        border-color: rgba(20, 98, 248, 0.6);
      }
    }
  }
}

为什么？
先看结构。

再看源码，在messagebox，main.js 里面有这样一段代码

MessageBox.prompt = (message, title, options) => {
  if (typeof title === 'object') {
    options = title;
    title = '';
  } else if (title === undefined) {
    title = '';
  }
  return MessageBox(merge({
    title: title,
    message: message,
    showCancelButton: true,
    showInput: true,
    $type: 'prompt'
  }, options));
};

• $prompt，是通过element-ui的方法在body下渲染出来一个class="el-message-box__wrapper"的div。这div根本就不是一个vue组件，只是使用js操作dom 生成的一些节点元素。所以不具备vue组件的一些特性：如在渲染template模板时，不会在节点上添加data-v-xxxxxx 之类的属性，而scoped 正是运用data-v-xxxxxx属性找到对应的元素实现局部样式控制的。
• 加了新的class之后，为啥可以展示新的样式？CSS权重，后定义的类会覆盖同权重的样式