加入my-mint.css

我这里用的postcss的变量定义,如果亲们用的是其他预处理器,要改成其他处理器的定义方式

覆盖mint-ui的primary颜色,改为自己UI的主题色

--main-color: #f76349; /* 橙色 主色调 */

.mint-header {
background-color: var(--main-color);
}
.mint-button:not(.is-disabled):active::after {
opacity: .2 /* .6 */
}
.mint-button--primary {
background-color: var(--main-color);
}
.mint-button--primary.is-plain {
border: 1px solid var(--main-color);
color: var(--main-color)
}
.mint-badge.is-primary {
background-color: var(--main-color)
}
.mint-switch-input:checked + .mint-switch-core {
border-color: var(--main-color);
background-color: var(--main-color);
}
.mint-navbar .mint-tab-item.is-selected {
border-bottom: 3px solid var(--main-color);
color: var(--main-color);
}
.mint-tabbar > .mint-tab-item.is-selected {
color: var(--main-color);
}
.mint-searchbar-cancel {
color: var(--main-color);
}
.mint-checkbox-input:checked + .mint-checkbox-core {
background-color: var(--main-color);
border-color: var(--main-color);
}
.mint-radio-input:checked + .mint-radio-core {
background-color: var(--main-color);
border-color: var(--main-color);
}
.mt-range-progress {
background-color: var(--main-color);
}
.mt-progress-progress {
background-color: var(--main-color);
}
.mint-msgbox-confirm {
color: var(--main-color);
}
.mint-msgbox-confirm:active {
color: var(--main-color);
}
.mint-datetime-action {
color: var(--main-color);
}

Vue修改mint-ui默认样式(默认风格)的更多相关文章

  1. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

  2. vue修改Element的el-table样式

    修改Element中的el-table样式,可以使用以下几种方法: 1. row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style. 2. ...

  3. vue mint ui 手册文档对于墙的恐惧

    http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...

  4. vue mint ui 手册文档

    npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...

  5. vue mint UI

    vue 与mint  UI 结合开发手机app  html5页面 api  文档   http://mint-ui.github.io/#!/zh-cn

  6. webpack整合 vue-router 路由,模块嵌套,整合Mint UI,MUI

    webpack整合 vue-router 结构 各个文件内容,一共八个文件, 还有src components 目录 Login.vue <template> <div> &l ...

  7. Mint UI文档

    Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...

  8. Vue——解决使用第三方组件库时无法修改默认样式的问题(使用 /deep/ )

    最近在开发一个基于Vue的后台管理系统,其中使用了element-ui第三方ui组件库.使用过组件库的人都知道,第三方组件往往会有一些默认的样式,而有些又是我们想要改变的. 一.基础(了解 <s ...

  9. element ui 修改默认样式

    修改element ui默认的样式 如果要组件内全局修改 首先在浏览器里F12找到element默认的UI类名 找到要修改的默认类名以后 在文件中修改代码,重写属性 <style> .el ...

  10. Vue中修改组件默认样式

    vue 中直接使用 class 修改组件的默认样式,在使用 scoped 之后,样式是没有效果. 此时可以使用div 包裹组件,deep 可以实现修改组件样式 .lxfix /deep/ .contr ...

随机推荐

  1. Java设计模式 - 单例模式 (懒汉方式和饿汉方式)

    概念: Java中单例模式是一种常见的设计模式,单例模式的意思就是只有一个实例.单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.这个类称为单例类. 单例模式的写法有好几种,这 ...

  2. js & right click menu

    js & right click menu https://stackoverflow.com/questions/4909167/how-to-add-a-custom-right-clic ...

  3. 第87天:HTML5中新选择器querySelector的使用

    一.HTML5新选择器 1.document.querySelector("selector");selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回n ...

  4. 如果使用引用方式引用了js后 则不能再本地写js 因为写了后不会有效果

    如果使用引用方式引用了js后 则不能再本地写js 因为写了后不会有效果

  5. FragmentTransaction add 和 replace 区别 转

    使用 FragmentTransaction 的时候,它提供了这样两个方法,一个 add , 一个 replace . add 和 replace 影响的只是界面,而控制回退的,是事务. public ...

  6. TCP的拥塞控制 (一)

    拥塞控制不同于流量控制,拥塞控制是在拥塞发生时,发送方根据一定的反馈,主动调节自己的发送速率,以防止拥塞恶化的行为. 1.   网络拥塞 路由器是网络中的关键组件,其内部有一定量的缓冲区,用于缓存来不 ...

  7. 解题:SDOI 2013 保护出题人

    题面 首先是愉快的推式子 $dp[i]=max(dp[i],\frac{sum[i]-sum[j-1]}{x[i]+(i-j)*d})(1<=j<=i<=n)$(考虑有一只僵尸正好走 ...

  8. 【bzoj3105】新Nim游戏

    Portal--> bzoj3105 新Nim游戏 Solution 转化一下问题 首先看一下原来的Nim游戏,先手必胜的条件是:每堆数量的异或和不为\(0\) 所以在新的游戏中,如果要保证自己 ...

  9. LOJ #6035.「雅礼集训 2017 Day4」洗衣服 贪心

    这道题的贪心好迷啊~我们对于两个过程进行单独贪心,然后再翻转一个,把这两个拼起来.先说一下单独贪心,单独贪心的话就是用一个堆,每次取出最小的,并且把这个最小的加上他单次的,再放进去.这样,我们得到的结 ...

  10. ubuntu如何杀死进程

    一.得到所有进程 先用命令查询出所有进程 ps -ef 二.杀死进程 我们使用ps -ef命令之后,就会得到一些列进程信息,有进程pid什么的,如果你要杀死莫个进程的话,直接使用命令   kill   ...