使用Mnit-ui框架时,如果想把CSS样式修改成自己想要的效果通过以下两种方法可以实现:
1:使用开发者工具查看css类名,重新添加样式覆盖。或者加个!important标记覆盖(部分可以);
2:在assets文件夹下的css文件里创建一个mymint-ui.scss,把自己需要修改的样式写里面,
在对应的页面import '../../assets/css/mymint-ui.scss';
路径自己调整,
如果项目很多地方需要的话也可以全局引入import './assets/css/mymint-ui.scss';
/* 覆盖mint-ui的primary颜色,改为自己UI的主题色 */
$color-primary: #39D59C; //
$color-primaryTr: transparent;
.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: none;
color: $color-primary;
}
.mint-navbar .mint-tab-item {
font-size: 30px;
letter-spacing: 3px;
line-height: 50px;
}
.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;
}