旅游景区网站建设策划书,全网营销的四大优势,杭州室内设计公司,做游戏网站公司1.前言#xff1a;不是正经的前端#xff0c;所以很多东西无法注意和知道#xff0c;就知道一点记录一点好了。
2.之前想修改mint-ui的样式#xff0c;但是官方文档丝毫未提及#xff08;也许前端人员都知道如何修改???#xff09;,后面通过两种方式可以进行mint-ui的…1.前言不是正经的前端所以很多东西无法注意和知道就知道一点记录一点好了。
2.之前想修改mint-ui的样式但是官方文档丝毫未提及也许前端人员都知道如何修改???,后面通过两种方式可以进行mint-ui的样式修改这两种方式都是通用的不限于mint-ui.
3.方式一使用Chrome开发者工具查看css的使用找到class的名字然后就可以使用了
4.方式二mint-ui的组件直接当成普通html组件使用样式该加就加然后加个important标记覆盖掉原来的样式。
--------------------------------------------------2018年8月30日更新
1.修改样式的核心是自己写的样式优先级第三方组件样式
以此为原则1)使用important提升优先级 2)main.js映入第三方组件后面引入自定义的样式表webpack打包后样式会覆盖
Vue修改mint-ui默认样式
在使用vue框架开发时饿了么的mint-ui框架是个不错的选择但是有时候我们需要修改它的默认样式方法如下
1.在src/assets/css目录下新建scss文件my-mint.scss内容如下
/* 覆盖mint-ui的primary颜色改为自己UI的主题色 */
$color-primary: #05AFAF;.mint-header {background-color: $color-primary;
}
.mint-button:not(.is-disabled):active::after {opacity: .2 /* .6 */
}
.mint-button--primary {background-color: $color-primary;
}
.mint-button--primary.is-plain {border: 1px solid $color-primary;color: $color-primary
}
.mint-badge.is-primary {background-color: $color-primary
}
.mint-switch-input:checked .mint-switch-core {border-color: $color-primary;background-color: $color-primary;
}
.mint-navbar .mint-tab-item.is-selected {border-bottom: 3px solid $color-primary;color: $color-primary;
}
.mint-tabbar .mint-tab-item.is-selected {color: $color-primary;
}
.mint-searchbar-cancel {color: $color-primary;
}
.mint-checkbox-input:checked .mint-checkbox-core {background-color: $color-primary;border-color: $color-primary;
}
.mint-radio-input:checked .mint-radio-core {background-color: $color-primary;border-color: $color-primary;
}
.mt-range-progress {background-color: $color-primary;
}
.mt-progress-progress {background-color: $color-primary;
}
.mint-msgbox-confirm {color: $color-primary;
}
.mint-msgbox-confirm:active {color: $color-primary;
}
.mint-datetime-action {color: $color-primary;
}2.在main.js中引入自定义的scss文件
import ./assets/css/my-mint.scss;//全局修改mint-UI样式
