Vue中修改Mint UI的Toast默认样式之字体大小调整方式

上山打野

vue修改Mint UI的Toast默认样式之字体大小调整


给Toast添加className

1. Toast({
   
2.     message: '请输入正确的手机号码',
   
3.     duration: 800,
   
4.     className: 'noticeError'
   
5. });

复制代码

添加样式

注意：取消scope，设为全局样式； 添加!important
stylus ，这里就没有加花括号、冒号和分号了。不要在意这些细节

1. .noticeError
   
2.     // font-size 28px !important
   
3.     transform scale(2) !important
   
4.     margin-left -.6rem !important

复制代码

这里，我的本意是放大Toast中的字号。然鹅，设置的font-size并不能生效。
所以转换思路：
改为放大整个Toast模块。放大之后，Toast的位置就跑偏了。所以通过marginl-left进行微调。

vue修改mint-ui默认样式（默认风格）


加入my-mint.css

我这里用的postcss的变量定义，如果亲们用的是其他预处理器，要改成其他处理器的定义方式
覆盖mint-ui的primary颜色，改为自己UI的主题色

1. --main-color: #f76349; /* 橙色 主色调 */
   
2. .mint-header {
   
3. background-color: var(--main-color);
   
4. }
   
5. .mint-button:not(.is-disabled):active::after {
   
6.    opacity: .2 /* .6 */
   
7. }
   
8. .mint-button--primary {
   
9.    background-color: var(--main-color);
   
10. }
    
11. .mint-button--primary.is-plain {
    
12.    border: 1px solid var(--main-color);
    
13.    color: var(--main-color)
    
14. }
    
15. .mint-badge.is-primary {
    
16. background-color: var(--main-color)
    
17. }
    
18. .mint-switch-input:checked + .mint-switch-core {
    
19. border-color: var(--main-color);
    
20. background-color: var(--main-color);
    
21. }
    
22. .mint-navbar .mint-tab-item.is-selected {
    
23. border-bottom: 3px solid var(--main-color);
    
24. color: var(--main-color);
    
25. }
    
26. .mint-tabbar > .mint-tab-item.is-selected {
    
27. color: var(--main-color);
    
28. }
    
29. .mint-searchbar-cancel {
    
30. color: var(--main-color);
    
31. }
    
32. .mint-checkbox-input:checked + .mint-checkbox-core {
    
33. background-color: var(--main-color);
    
34. border-color: var(--main-color);
    
35. }
    
36. .mint-radio-input:checked + .mint-radio-core {
    
37. background-color: var(--main-color);
    
38. border-color: var(--main-color);
    
39. }
    
40. .mt-range-progress {
    
41. background-color: var(--main-color);
    
42. }
    
43. .mt-progress-progress {
    
44. background-color: var(--main-color);
    
45. }
    
46. .mint-msgbox-confirm {
    
47. color: var(--main-color);
    
48. }
    
49. .mint-msgbox-confirm:active {
    
50. color: var(--main-color);
    
51. }
    
52. .mint-datetime-action {
    
53. color: var(--main-color);
    
54. }

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/284560bd2.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！