vue-cli —— 如何局部修改Element样式

　　最近在做vue项目时用到了Element，发现这玩意儿用起来很舒服，很新颖，上手也很快，而且效果足够酷炫。但是后面发现一个很大的问题，那就是Element的样式有限，这极大地限制了项目的应用广度，所以我们有必要对Element内部的CSS进行一定的覆盖，来改变其样式。在修改Element样式时，遇到了一些问题，这里简单做一些记录，便于以后查阅。

　　我在用el-switch做开关切换时，使用默认样式：

代码如下：

效果：

　　现在我想把蓝色字体改为其他颜色，但是我发现无论我如何修改样式，界面始终没有任何变化，所以我想到可能是需要覆盖Element默认的el-switch样式。于是，我找呀找，找呀找，终于在node_modules/element-ui/lib/theme-chalk下找到了对应的默认样式，如下所示：

Element默认样式：

　　于是，我想着把，这下问题能解决了，我开开心心地在自己的组件里把对应的样式覆盖了：

　　我鸡冻的点了一下刷新，发现并没有什么卵用，还是以前熟悉的面孔：

　　我不服气，继续百度，似乎看到一丝曙光，按照网上说的，在样式的color后面加了 !important ，然后心情美丽地刷新了一下，还是老样子，我一个七尺男儿简直想哭，崩了.....

　　我仍不死心，继续找度娘，终于老天不负有心人，我get到了我的宝贝，把样式单独写在外面就成功了。

　　惊喜之余，我发现，这种修改方式存在一个bug，那就是其他页面的样式同时也会被修改成这种样式。我忽的想起，style标签上添加的scoped属性，是表示它的样式作用于当下的模块，很好的实现了样式私有化的目的。如果不加scoped属性，这个样式就具有全局属性。因此，一旦在不加scoped属性的情况下，样式被覆盖，那么整个项目使用到该标签时的样式都会跟着被覆盖。

　　所以问题又来了，如何让该覆盖样式只在当下组件起作用呢？问谁呢？继续找度娘呗.......(才疏学浅，只会度娘....)，找啊找，找啊找，费了好大劲，终于找到了答案。就是简单地用scoped和>>>符号进行穿透。何谓穿透？(引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。这时就要通过特殊的方式，来穿透scoped。)

　　最后大功告成，如下：

注意：

1.这里的  >>> 可以用 /deep/ 替换掉，这里的 /deep/ 操作符是 >>> 的别名，同样也可以正常工作。

2.这里的 !important 不加其实也没毛病，但是因为这是使用第三方库的样式，所以在覆盖样式时最好加上 !important ，这样才能指明优先级。

以上就是vue-cli —— 如何局部修改Element样式的详细内容，更多关于vue 修改Element样式的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 浅谈vue中改elementUI默认样式引发的static与assets的区别

    浅谈vue中改elementUI默认样式引发的static与assets的区别

    首先从这说起 vue项目中的elementUI的默认样式怎么改 由于elementUI的样式太单调,比如这个slider滑块 elementUI中的API是没办法改变这个slider的颜色的,可是老板喜欢很黄,非要用yellow色.

  • 解决vue+elementui项目打包后样式变化问题

    博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎, 找到了问题所在以及解决办法: main.js中的引入顺序决定了打包后css的顺序,组件内的样式没有生效可能是被第三方组件样式覆盖了,所以把第三方组件放在前面引入,router放在后面引入,就可以实现组件样式在第三方样式之后渲染. 代码如下: main.js // The Vue build version to load with the `import

  • vue修改Element的el-table样式的4种方法

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

  • vue-cli3自动消除console.log()的调试信息方式

    在vue-cli3里面已经有这个功能了,只需要开启这个功能就行了,默认是关闭的 1.找到生产环境的配置文件 2.然后找到 UglifyJsPlugin 这个插件添加一行代码 补充知识:Vue cli3 实现去除console.log 去除控制台输出 下载移除控制台输出的包 npm install babel-plugin-transform-remove-console --save-dev 新建 babel.config.js let plugins = [ vant插件的按需加载 [ 'im

  • vue-cli3访问public文件夹静态资源报错的解决方式

    今天在项目中使用了public文件夹里的静态资源,在本地测试没有发现问题,但是项目部署到fat服务器却报了404错误. 我发现原因在于我的项目没有部署在域名的根部,而我引用public文件是通过绝对路径方式引用的,因为就出现了路径错误. 路径如下: <img :src="`/image1.png`"> 在官网文档中发现这种情况需要为 URL 配置 publicPath 前缀:process.env.BASE_URL 正确的引用路径是: <img :src="

  • vue中element组件样式修改无效的解决方法

    如下所示: <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了. 以上这篇vue中element组件样式修改无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue 组件间的样式冲突污染 浅谈vue中改elementUI默认样式引发的st

  • Vue-cli4 配置 element-ui 按需引入操作

    在按照element-ui文档和网上各个文章的描述方式都未能正确配置出按需加载的功能.经小编一番摸索之后,终于搞定了,本篇文章记录实现的全过程 #1 node与vue的版本情况 #2 未按需加载打包后的文件情况 由上图看出,只是引入了 element-ui 框架后,js文件急剧的上升到了 783KB,这显然是不能接受的. element-ui 按需加载文档:https://element.eleme.cn/#/zh-CN/component/quickstart #3 添加 babel-plug

  • vue-cli —— 如何局部修改Element样式

    最近在做vue项目时用到了Element,发现这玩意儿用起来很舒服,很新颖,上手也很快,而且效果足够酷炫.但是后面发现一个很大的问题,那就是Element的样式有限,这极大地限制了项目的应用广度,所以我们有必要对Element内部的CSS进行一定的覆盖,来改变其样式.在修改Element样式时,遇到了一些问题,这里简单做一些记录,便于以后查阅. 我在用el-switch做开关切换时,使用默认样式: 代码如下: 效果: 现在我想把蓝色字体改为其他颜色,但是我发现无论我如何修改样式,界面始终没有任何

  • vue项目如何全局修改el-button样式

    vue项目如何全局修改el-button样式

    目录 vue全局修改el-button样式 修改前 代码修改 样式2 vue全局修改el-button样式 修改前 效果图: 代码修改 在APP.vue文件,或者某个.vue文件. 在没有scoped的style标签里面修改: <style lang="scss"> .el-button--primary{ color: #1686f5; background-color: rgb(240, 248, 255); border-color: rgb(148, 197, 23

  • 详解基于Vue cli开发修改外部组件Vant默认样式

    详解基于Vue cli开发修改外部组件Vant默认样式

    前言 在引入外部组件的时候,想要修改默认样式,可以通过class修改,但一般会有权重不够等各种原因,官网其实列出了一套主题定制的方案,通过覆盖配置文件来修改样式,官网地址:主题定制 提示:以下是本篇文章正文内容,下面案例可供参考 一.Less 因为Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,可以通过替换样式变量即可定制你自己需要的主题. 给你的项目配置less: npm install less --save-dev npm install less-loader --s

  • vue对插件(iview,elementui,treeselect)样式的局部修改方式

    目录 (iview,elementui,treeselect)样式的局部修改 学习描述 具体方法 vue+iview 样式穿透-修改第三方插件样式 修改第三方插件样式 (iview,elementui,treeselect)样式的局部修改 学习描述 在vue的使用过程中,我们知道插件的使用可以大大的提高我们的开发效率,这写插件都是经过很多人的验证和修改的,要比我们自己写方便的很多. 但是在开发的过程中,有些插件一些在特定的页面我们可能不要原来的样式,需要进行修改.然而我们在使用vue的过程中都会

  • 在Vue中使用deep深度选择器修改element UI组件的样式

    在项目当中我们常常会使用到 Element UI 组件库来进行快速开发,但是组件在引入之后它都会有官方默认的样式,有些情况我们需要修改它的样式. 方法一(不推荐):使用class 为要修改的这个组件标签设置一个 class 类名,然后在 <style></style> 标签中设置样式.但要注意这种方式必须是在全局下才会生效,也就是说 <style></style> 标签中不能用 scoped 属性. <style> </style>

  • vue中element-ui组件默认css样式修改的四种方式

    vue中element-ui组件默认css样式修改的四种方式

    目录 前言 1.使用全局统一覆盖 2.在.vue文件中修改 3.修改组件的style样式 4. 参考element-ui官方文档的api 疑问 总结 前言 修改element-ui组件的默认样式一直是一个老生长谈的话题,在做完公司的一整个项目后,我总结了以下4种修改element-ui默认样式的方法. 1.使用全局统一覆盖 针对一些通用的.样式固定的组件,可以全局处理,其方法是新建一个css或者scss文件,覆盖element原有的class 你可以在src/styles目录下新建一个eleme

  • vue cli 局部混入mixin和全局混入mixin的过程

    vue cli 局部混入mixin和全局混入mixin的过程

    目录 局部混入mixin和全局混入mixin 应用场景 1.局部混入mixin 2.全局混入mixin mixins的使用方法和注意点 局部混入mixin和全局混入mixin 应用场景 两个组件,都需要用到同一个点击事件方法,此时使用mixin混入,可以很好的实现代码的复用. 在vue cli搭建的项目中,src目录下新建mixin.js文件: // 对外暴露mixin对象 export const mixin = { data() { return { msg: 'hello' } }, me

  • vue里面父组件修改子组件样式的方法

    在使用 vue 的开发中,我们有时会引用外部组件,包括 UI 组件(ElementUI.iview). 当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素. 但是在父组件中添加 scoped 之后,父组件的样式将不会渗透到子组件中,所以在父组件中书写子组件的样式是无效果的. 一.去掉 scoped 在父组件的 <style> 中去掉 scoped 后,父组件中可以书写子组件的样式,但是你会担心这样会污染全局样式. [因为我们知道正确使用全局样式

  • vue修改滚动条样式的方法

    vue修改滚动条样式的方法

    目录 首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar. 注意, ::-webkit-scrollbar仅仅支持WebKit的浏览器(例如谷歌Chrome.苹果Safari). 其次还需要了解滚动条的一些组成: ::-webkit-scrollbar 滚动条整体部分,可以设置宽度等 ::-webkit-scrollbar-thumb 滚动条里面的滑块 ::-webkit-scrollbar-button 滚动条轨道两端的按钮,允许通过点击以微调滑块的位置 ::-webki

随机推荐