vux修改css样式的2种办法
最近手上有个移动端的项目。前端UI框架是选择的VUX。但是在使用的时候经常会发现框架自带的组件样式和我们要求的不一致。经常需要手动覆盖样式。这里记录下我们使用的2种方法。
我们以XHeader组件为例。XHeader组件默认为藏青色。
全局方式
找到build目录下的webpack.base.conf在最后加入一下2行
const themeConfig={
name: 'less-theme',
path: 'src/assets/less/theme.less'
};
module.exports = vuxLoader.merge(webpackConfig, {
plugins:['vux-ui', themeConfig]
});
注意path的路径
然后我们在theme.less里面增加
/**
* Header
*/
@header-background-color: #3cc51f;
@header-title-color: black;
局部方式
由于有时候我们一个界面有多个组件。样式都不一致的时候。全局方式就不适用了。所以我们需要采用局部的方式。同样还是XHeader我们这次需要把他们在同个界面把颜色修改成2种颜色可以使用/deep/ 或者>>>这里方式来修改。
<template>
<div class="wrap">
<x-header class="">XX银行<a slot="right"></a>
</x-header>
<div class="wrap1">
<x-header class="">XX银行<a slot="right"></a>
</x-header>
</div>
<toast v-model="isToast" type="text" position="middle" :text="toastTxt" width="auto"></toast>
</div>
</template>
<style scoped>
.wrap /deep/ .vux-header {
background-color: #3cc51f;
}
.wrap1 >>> .vux-header {
background-color: red;
}
</style>
vux修改css样式的2种办法的更多相关文章
- 【JS新手教程】JS修改css样式的几种方法
本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)
CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...
- JS笔记一:动态修改css样式
---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小 通过函数来传递图片id,height,width,使用doc ...
- 修改css样式+jq中的效果+属性操作+元素操作
:checked 选框选中的 一.修改css样式: 1.参数只写属性名,则返回属性值 $(this).css( ' color '); //300px 2.参数是属性名,属性值,逗号分隔,是 ...
- HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- ASP.NET中直接用C# 动态修改CSS样式
ASP.NET中直接用C# 动态修改CSS样式 wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...
- python 中增加css样式的三种方式
增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
随机推荐
- HDU 1079 简单博弈
判断下一步能否到达必胜态,如果可以当前状态就是必败态,否则当前状态记为必胜态 #include <cstdio> #include <cstring> #include < ...
- Xterm256终端颜色的名称
hi x016_Grey0 ctermfg=16 guifg=#000000 "rgb=0,0,0 hi x017_NavyBlue ctermfg=17 guifg=#00005f &qu ...
- Layui图标
layui 图标 layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont).因此你可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css 控制文字属性,如 c ...
- Ubuntu 16.04硬盘有坏道,开机显示blk_update_request:I/0 error
可以尝试以下方式解决: 1.检查坏道(效果明显,但是比较慢,检查出来并没有什么用,只是知道有坏块) sudo badblocks -s -v -o /root/bb.log /dev/sda1 2.快 ...
- MongoDB小结24 - 索引简介2
索引的名字 集合中每个索引都有一个字符串类型的名字,来唯一标识索引. 服务器通过名字来操作或者删除索引. 要注意的是,索引名有字符个数限制,所以索引创建时一定要用自定义的名字,如 db.user.en ...
- Google Kaptcha验证码的使用
原文:http://www.kailing.pub/article/index/arcid/92.html Kaptcha是什么? kaptcha 是谷歌开源的非常实用的验证码生成工具,基于Simpl ...
- poj 2318 TOYS & poj 2398 Toy Storage (叉积)
链接:poj 2318 题意:有一个矩形盒子,盒子里有一些木块线段.而且这些线段坐标是依照顺序给出的. 有n条线段,把盒子分层了n+1个区域,然后有m个玩具.这m个玩具的坐标是已知的,问最后每一个区域 ...
- Matplotlib作图基础
折线图 import matplotlib.pylab as pylab import numpy as npy x=[1,2,3,4,8] y=[5,7,2,1,5] #折线图 pylab.plot ...
- union关键字及大小端模式
1. union 关键字 union 维护足够的空间来置放多个数据成员中的“一种”,而不是为每一个数据成员配置空间,在 union 中所有的数据成员共用一个空间,同一时间只能储存其中一个数据成员,所有 ...
- UVA1523-Helicopter(暴力+全排列)
题目链接 题意:有八个乘客坐在直升机上,求重心M最小值. 思路:依据题目所给的公式,我们能够知道要使得M最小.也就是要使得Mv和Mh的和最小,我们能够使用全排列,分别将每一个值放在各个位子上,然后更新 ...