最近手上有个移动端的项目。前端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种办法的更多相关文章

  1. 【JS新手教程】JS修改css样式的几种方法

    本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...

  2. js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  3. 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)

    CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...

  4. JS笔记一:动态修改css样式

    ---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小 通过函数来传递图片id,height,width,使用doc ...

  5. 修改css样式+jq中的效果+属性操作+元素操作

    :checked    选框选中的 一.修改css样式: 1.参数只写属性名,则返回属性值 $(this).css( ' color ');   //300px 2.参数是属性名,属性值,逗号分隔,是 ...

  6. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

  7. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  8. ASP.NET中直接用C# 动态修改CSS样式

    ASP.NET中直接用C# 动态修改CSS样式  wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...

  9. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

随机推荐

  1. android view自定义

    转载自:http://blog.csdn.net/iispring/article/details/50708044

  2. HTML5调用传感器的资料汇总

    都可以调用:devicetemperature(温度).devicepressure(压力).devicehumidity(湿度).devicelight(光).devicenoise(声音).dev ...

  3. POJ 3680_Intervals

    题意: 给定区间和该区间对应的权值,挑选一些区间,求使得每个数都不被K个区间覆盖的最大权值和. 分析: 如果K=1,即为区间图的最大权独立集问题.可以对区间所有端点排序后利用动态规划的方法,设dp[i ...

  4. [bzoj2738]矩阵乘法_整体二分_树状数组

    矩阵乘法 bzoj-2738 题目大意:给定一个$n*n$的矩阵.每次给定一个矩阵求矩阵$k$小值. 注释:$1\le n\le 500$,$1\le q\le 6\cdot 10^4$. 想法: 新 ...

  5. JDBC中的批处理

    以下内容引用自http://wiki.jikexueyuan.com/project/jdbc/batch-processing.html: 批处理是指将关联的SQL语句组合成一个批处理,并将他们当成 ...

  6. 在ASP.NET Core 中使用Cookie中间件 (.net core 1.x适用)

    在ASP.NET Core 中使用Cookie中间件 ASP.NET Core 提供了Cookie中间件来序列化用户主题到一个加密的Cookie中并且在后来的请求中校验这个Cookie,再现用户并且分 ...

  7. android 深入浅出 群内“每日一问” 问答总结

    永远不变的就是变. 俗话说的好,环境改变人生. 常常面对的是一群积极奋进的人,那么你的心态和生活也会变的充满斗志.青春在于折腾,趁我们还年轻,拿出你的激情.踏着泪水载着梦,才干拥有自己的一片天空. 上 ...

  8. windows 7 文件加密设置

    方法/步骤1 加密文件 1 右击需加密的文件,选择“属性”命令. 2 在属性对话框的“常规‘选项卡中单击”高级“按钮. 3 在弹出的对话框中选中”加密内容以便保护数据“复选框,单击”确定“按钮. 4 ...

  9. Storm计算结果是怎样存放的

    Storm计算的结果存放在哪里? 刚開始接触Storm的时候.往往都会有这么一个疑问:"Storm处理后 的计算结果是保存在哪里呢?"是内存中还是在其他的地方? 官方给出的解释是: ...

  10. Jmeter技巧

    Jmeter参数化的4种方法 用Jmeter测试时包含两种情况的参数,一种是在url中,一种是请求中需要发送的参数. URL中的参数,如:http://blog.da-fang.com/index.p ...