The solution to the element-ui custom message-box custom style not taking effect

element-ui custom message-box custom style does not take effect

background

This is a problem that my friend encountered in development today. Use jsx syntax to customize an msgbox. Customizing msgbox naturally requires custom styles, and then I encountered the problem that custom customClass does not take effect.

Here is a way to write jsx

this.$msgbox({
        title: 'confirm',
        message: h('div', {
          style: 'text-align: center'
        }, [
          h('p', { class: 'content-title' }, 'Please confirm whether it is XX'),
          h('div', { class: 'content-message' }, 'XXXXXX'),
          h('div', { class: 'content-message' }, 'XXXXXXXXXXXXXXXXXXXXXXXXX')
        ]),
        customClass: 'return-visit-message-box',
        showCancelButton: true,
        confirmButtonText: 'yes',
        cancelButtonText: 'no',
      }).then(() => {
        ()
      }).catch(() => {
        this.$('XXXXXXXXXXXXXX')
      })

First analyze the reasons for the failure

1. This.$msgbox ($alert, etc.) is a div with class="el-message-box__wrapper" rendered under body through element-ui method. If you have read the source code, you will know that this div is not a vue component at all, it is just some node elements generated by dom using js. Therefore, it does not have some characteristics of the vue component: for example, when rendering the template template, attributes such as data-v-xxxxxx will not be added to the node, and scoped uses the data-v-xxxxx attribute to find the corresponding elements to achieve local style control. Therefore, it is inevitable that it will not take effect.

2. /deep/ does not take effect. Deep is just a style injection that is added to the css style [data-v-xxxxxx], in essence, is implemented from the perspective of vue components. As analyzed earlier, message-box itself is not a vue component, so it cannot take effect.

Solution

1. If scoped does not take effect, then you can only place the style globally, add a style without scoped to the current component, or put it in the global style sheet.

<style>
.-visit-message-box {
  width: 355px;
  padding-bottom: 0;
  .el-message-box__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    background: rgba(241,243,245,1);
    .el-message-box__title {
      font-size:16px;
      font-weight:500;
      color:rgba(51,51,51,1);
    }
    .el-message-box__headerbtn {
      position: unset;
    }
  }
  .el-message-box__content {
    padding-top: 20px;
    .content-title {
      font-size:16px;
      font-weight:500;
      color:rgba(51,51,51,1);
      line-height:22px;
      margin-bottom: 16px;
    }
    .content-message {
      font-size: 12px;
      font-weight: 400;
      color: #666666;
      line-height: 17px;
    }
  }
  .el-message-box__btns {
    padding: 20px 20px 20px;
    .el-button {
      padding: 9px 27px;
    }
  }
}
</style>

element-ui style modification does not take effect, the easiest solution

Refer to the Internet to remove the scoped scope in style, which does take effect, but will affect the style of other components.

We can just add ::v-deep before this class name. Go and try it out quickly. It’s super practical!

    // !important after adding ::v-deep method and attribute before class name    ::v-deep .el-input__prefix {
          left: 71px !important;
          transition: all 0.3s;
    }

The above is personal experience. I hope you can give you a reference and I hope you can support me more.