how to overwrite css !important style

how to overwrite css !important style

css !important bug

how to override css !important style

https://stackoverflow.com/questions/14462840/can-i-override-important

https://stackoverflow.com/questions/11178673/how-to-override-important

css

1. more specific selector
2. css order

js

1. js remove & add

---

demo

bug

@charset "UTF-8";

div[role="dialog"] > div.el-message-box {
  overflow: hidden !important;
}

.el-message-box__wrapper > .el-message-box{
  overflow: auto !important;
}

global css

// vue

<style lang="less" scoped>
  /* scoped css & !importtant override bug */
  @import url("./index.less");
</style>

<style lang="less">
  /* global css & !importtant override OK */
  @import url("./index.less");
</style>

el-message-box.less

@charset "UTF-8";

/* global css & !importtant override OK */

/*

<style lang="less">
  @import url("./el-message-box.less");
</style>

*/
div[role="dialog"] > div.el-message-box {
  overflow: hidden !important;
}

.el-message-box__wrapper > .el-message-box{
  overflow: auto !important;
}

***.