MintUi如何改变Toast组件样式

Question

现在是黑色的背景 我想让它变成别的颜色 手册中说可以className为其添加类名 可是试了不成功是怎么回事？文档地址链接描述

完整代码

<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>

Answer 1

你打开开发者工具，然后在element样式中找到对应样式，强制修改就好了呀

Answer 2

将样式写到全局看哈

Answer 3

可以使用行内样式看看生效否，如果生效，则再用!important属性增加权限
.aaa{background-color: #ccc!important;}，总会找到原因的。给你一个demo瞧瞧。

Answer 4

结合楼上的回答，一般也就这几中情况了
感觉主要还是你调试的方式不太对

查看元素class是否添加成功（最好是有意义的class）
是否样式加在了带有scoped的style标签中
权重问题
缓存问题

Answer 5

1、建一个css文件重写样式,然后在App.vue文件中@import

/* 覆盖样式写法 */
.mint-toast {
  background: #f37e44;
}
/* 使用className */
.toasts {
  background: red;
}

2、想看样式，可以设置duration为-1，就不会消失了

Toast({
  message: '提示',
  position: 'bottom',
  duration: -1,
  className: 'toasts'
})

Answer 6

className添加的没有问题，我这边是在main.js引入了一个reset.css文件

Toast({

message: '提示',
position: 'bottom',
duration: -1,
className: 'toast-cls'

})
reset.css文件

.toast-cls{
    width: 56% !important;
    }

Answer 7

这两天看到这个问题，不知道楼主解决了没
我项目用的vux，想改单页面的toast样式，因为toast是js动态加载，楼上的方法都尝试过了，最后认证只有在全局设置样式才能更改，因为不符合需求所以就另辟蹊径了，最后在路由守卫做的更改，根据路径判断是否跳到当前单页面，用js更改toast的样式。