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

mint-ui修改样式的小技巧相关推荐

修改样式_Word小技巧：如何设置样式快速修改文本格式
设置样式找到菜单栏-开始下的样式模块, 将光标停留在需要设置样式的文本任意处,或者直接选定需要设置样式的文本,点击样式模块中需要的格式即可. 备注:点击带小横线的向下三角符号,可以显示出更多的格式. ...
学习UI设计的一些小技巧你会了吗
最近有很多小伙伴都在学习UI设计技术,对于如今的互联网行业,UI设计这个岗位的需求量确实非常大,发展空间比较好,下面小编就为大家整理一些学习UI设计的一些小技巧,希望能够帮助到正在学习UI设计的同学. ...
vue-cli3.0结合lib-flexible、px2rem实现移动端适配，完美解决第三方ui库样式变小问题
vue-cli3.0结合lib-flexible.px2rem实现移动端适配,完美解决第三方ui库样式变小问题参考文章: (1)vue-cli3.0结合lib-flexible.px2rem实现移动 ...
css盒模型、布局模型、 flex弹性盒模型及样式设置小技巧
一.盒模型元素分类常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl> ...
iView UI / Element UI修改样式不成功解决办法
项目场景:iView UI / Element UI修改样式不成功问题描述例如:在修改组件样式中,直接修改还是通过添加类名,修改都不成功原因分析: 原因:,其中的scoped限制了修改解决方案 ...
双纵坐标的绘图命令_Matplotlib绘图 | 快速定义图表样式的小技巧
Matpltlibrc file 设置图表属性 Matplotlib 在绘图过程中,每创建一个图表,都要对该图表内的样式(例如字体大小.颜色.分辨率.横纵坐标刻度.横纵坐标标签)设置一次,重复乏味, ...
UI设计师简历填写小技巧
作为一名UI设计师,如何找到一份比较理想的工作,应该先从你的简历入手.目前互联网公司都在怨声载道,认为招不到合适的设计师,而求职者也在抱怨自己接不到公司的offer.原因归根结底,不在于招聘者,而在求 ...
revit服务器地址修改,BIM软件小技巧：Revit软件中如何更改项目原点
Revit软件中如何更改项目原点如果我们已经开始项目设计了,各个专业的模型已经连接并搭建了部分或者全部的模型,这种情况下肿么更改原点的位置并使各专业文件统一原点呢?下面我们就来了解一下具体的操作步骤 ...
css知识笔记（五）——css样式设置小技巧
水平居中设置-行内元素如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.如下代码: html代码: <body><d ...