The problem of mintUI modifying toast style

just want to change the background color of the pop-up layer. Some people say that open the console to check the pop-up style and then overwrite it in css, but change that mint-toast style doesn"t work. The real style pops up that can"t be seen at all, not even by changing the disappearance time. I think we should change it through the plug-in itself instead of changing the code of the components below css. You can try

.
<template>
  <div>
    <button @click=copy></button>
  </div>
</template>

<script>
import { Toast } from "mint-ui"

export default {
  methods: {
    copy () {
      Toast({
        message: "",
        position: "bottom",
        duration: 1000,
        className: "toasts"
      })
    }
  }
}
</script>

<style scoped>
.mint-toast {
  background-color: red !important;
}
.toasts {
  background: red !important;
}
</style>
Mar.17,2022

remove scoped or define styles globally.


Master, hello ~
the problem is not mint-ui , but scoped of style , you have increased the scope of css. Related documents can be found in Portal

there are two solutions:
1, remove scoped
2 from style , and use depth selector

.

can be mixed:

<style>
/*  */
.mint-toast {
  background-color: red !important;
}
</style>

<style scoped>
/*  */
</style>
Menu