Element-ui之修改样式

修改样式的方法

  1. 官网上面介绍了几种方法
  2. 当然还有其他的方法,比如直接在vue文件的style里面设置样式进行覆盖,或者引入其他的scss文件(谁说的一定要引入variables.scss,我偏不信),下面为直接在style中通过选择器进行覆盖的样子,结果也是有效的

  3. 经过一段时间的使用,发现直接在style中添加样式并不好维护,因为很多时候,同一个样式会利用在项目中的很多地方,比如一个后台的所有按钮风格都要一样,我们也不可能每一个都去设置一下样式,如果突然感觉颜色不对,岂不是要每个文件的去修改了,而且有些样式的设置通过这种方式也未必有效(当然其他名字的scss也会有同样的问题,并不总是有效的)
  4. 所以我们直接采用element-variables.scss的方法,在src目录下创建common->styles->element-variables.scss目录;

基本设置

  1. 首先要对引入的element-variables.scss进行基本设置

    $--font-path: ‘~element-ui/lib/theme-chalk/fonts‘;
    @import "~element-ui/packages/theme-chalk/src/index";

  2. 然后我们就可以快乐的开始修改样式啦!

修改默认颜色

  1. Element-ui的默认颜色是鲜艳、友好的蓝色,当我们需要修改整体风格的颜色时,只需要在element-variables.scss里添加一条简单的代码,$的这种写法是scss里对变量的修饰符。

修改button的样式

  1. 在处理其他组件的样式,我们通常不会直接进行修改,而是通过交集选择器的方式限定范围,如下图(注意,这儿的限制选择器放到默认的样式后面,可以更好的进行维护)

    .el-button.edit {
      color: #fff;
      background-color: #333;
    }
    .el-button.add {
      color: #fff;
      background-color: #666;
    }
    .el-button.delete {
      color: #fff;
      background-color: #999;
    }
  2. 在组件里面进行使用
    • 首先引入element-variables.scss文件

      <style rel="stylesheet/scss" lang="scss" scoped>
      @import "[email protected]/common/styles/element-variables.scss";
      </style>
    • 在遍历里面加入class便可完成样式的修改
      <el-button class="edit">编辑</el-button>
      <el-button class="add">添加</el-button>
      <el-button class="delete">删除</el-button>
  3. 最终效果如下

原文地址:https://www.cnblogs.com/usebtf/p/9098382.html

时间: 2024-11-14 13:29:47

Element-ui之修改样式的相关文章

vue 修改element ui 的默认样式

应该还能针对其他的奇葩样式修改的 比如:mint-ui,vux 应该都适用 1.在样式  后加 !important ,例如:width: 178px !important; 2.<style scope>  </style> 中的scope去掉 3.vue有一个默认的<style scope>  </style>标签,这是后重新新建一个<style>  </style>的标签.区分开来,就是使用两个<style>  &l

element ui 修改默认样式

修改element ui默认的样式 如果要组件内全局修改 首先在浏览器里F12找到element默认的UI类名 找到要修改的默认类名以后 在文件中修改代码,重写属性 <style> .el-form-item__label{ //你要修改的CSS属性 } </style> 但是如果已经在全局内修改了默认样式,但又想在某一个标签内再次重写样式,则可以给要修改的标签加一个父类,在父类里重写样式,这样可以避免代码污染,也可以叫做局部修改 <el-form-item class=&q

vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式

在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是想要修改还是有方法的: 1. 在不去掉scoped的情况下,在全局样式中覆盖,这种解法,有弊端,可能会污染全局样式. 2. 如果项目用到了预处理器,可以通过vue-loader提供的新写法 vue-loader 写法如下: <style scoped> .a >>> .b { /

修改element ui 默认样式最好的解释

KedAyAyA 17年10月 https://forum.vuejs.org/t/elementui/19171/5 首先添加了scoped的style标签会在vue-loader里进行处理 所谓的局部css 就是在你当前组件里的所有html标签打一个data-tag 例如 然后会把你scoped里的css编译为 xxx[ data-v-4d856c52] 知道了scoped的作用,来看看为什么我们不能修改el-table里的样式 如果你修改样式你一定会这么写css .table th {xx

覆盖element ui 的样式

我们可以使用 !important  来覆盖element ui 的样式 首先先在浏览器中找到 我们所要修改的样式 ,然后找到她的 class  重新写他的样式 ,例如 . app  { width :10ox ! important ; } 注意 :本来element  ui 默认的width 为5px 我们要覆盖他的样式,就在要修改的 width 后面加上    ! important 原文地址:https://www.cnblogs.com/guangzhou11/p/9710497.ht

vue+element 通过ref修改一切硬核样式~

今天的需求是这样的,点击按钮,弹出一个Popover 弹出框 然后老大说,把弹出框往下移移,box-shadow值设的大一些... 然后就查看elenent的Popover文档,并没有方法,而且这个组件修改样式需要 定义popper-class 来为 popper 添加类名 然而发现修改不了样式,查看属性,发现它的样式在外层加载,试了好多办法,都没用,直到我灵光一闪... 你不是牛逼吗?改不动吗?使用ref操作一切,哈啊哈哈哈 ref牛逼,vue牛逼! 以后不存在改不动的样式! 原文地址:htt

element UI+vue:表格使用cell-style改变单元格样式

// 调用方法的部分为:<el-table:cell-style="timeStyle"> // 要修改样式的部分为: <el-table-column label="创建时间" :formatter="startTime" width="150"> // 方法: methods:// 改变表格中时间的字体样式:调小timeStyle(column) {if(column.columnIndex ===

vue+vuex+router+element ui

1. cnpm install -g vue-cli 项目的main.js引入import Vue from 'vue' 2. 创建项目 vue init webpack +项目名称 3.  cnpm install ----->下载依赖文件 npm run dev ----->运行项目 4.config文件夹,下面的index.js里面修改port端口号 /////////////////////////////////////// 好像vue 在2.0之后自动的就引入了router和vue

element ui Angular学习笔记(一)

1.element ui安装 npm i --save element-angular 2.Angular-cli引入 引入后需要开启ElModule.forRoot(),也可以单独引入某个组件入ElChildModules.ElButton 3.指令 [el-class] 如:<el-alert [el-class]="'myClass'">text</el-alert> .myClass { >div { color: #ccc; } } 在自己的@c

页面元素隐藏、修改样式

jquery隐藏元素 <div id="div1"> <a id="a1">1</a> <a id="a2" style="display:none">2</a> <a>3</a> </div> // 如上 $("#a1").hide(); $("#a2").show(); // 没有id情况