just open the developer tool, find the corresponding style in the element style, and force the modification
write the style globally
you can use the inline style to see if it works. If it works, then use the ! important attribute to increase permissions
.AAA {background-color:-sharpccimportant;} , you will always find Let me give you a demo look.
combined with the answers from upstairs, there are generally only a few of these situations.
I feel that the main reason is that your debugging method is not quite right
.
check whether the element class has been added successfully (preferably a meaningful class)
whether the style has been added to the style tag with scoped
weight
caching
1. Create a css file to rewrite the style, and then @ import
in the App.vue file.
/* */
.mint-toast {
background: -sharpf37e44;
}
/* className */
.toasts {
background: red;
}
2. If you want to see the style, you can set duration to -1 , and it will not disappear
.
Toast({
message: '',
position: 'bottom',
duration: -1,
className: 'toasts'
})
There is no problem with the addition of
className. I have introduced a reset.css file in main.js
.
Toast ({
)
message: '',
position: 'bottom',
duration: -1,
className: 'toast-cls'
})
reset.css file
.toast-cls{
width: 56% !important;
}
seeing this problem in the past two days, I wonder if the landlord has solved
the vux, used in my project wants to change the toast style of the single page, because toast is dynamically loaded by js, and the upstairs methods have all been tried. Finally, the authentication can only be changed by setting the style globally. Because it does not meet the requirements, it takes a different approach. Finally, the change made by the route guard determines whether to jump to the current single page according to the path. Change the style of toast with js.
