修改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 {xxx:xxx}

那么scoped默认会在最后一层加一个tag 也就是编译成.table th[ data-v-4d856c52]

{xxx:xxx}

而elemetui table组件是你的一个子组件 对于子组件只给子组件的根元素打上父组件的tag 也就是你可以在table组件的根元素中看到这个tag 但是th这个标签并没有tag 所以依旧是找不到匹配 自然也就无法加上样式

那么这样做对吗?

答案肯定是对的,因为父组件当然要只管理自己的样式 子组件管理自己的样式 在父组件里修改子组件的样式本来就是不太合理的 也会造成父子组件的耦合度增高

道理都懂了 看你的需求是要特殊修改一下某些table而不是整体重构样式

那么根据问题的原理出发,我们认为只要能把data-tag作用于.el-table根元素就可以覆盖样式了

https://vue-loader.vuejs.org/en/features/scoped-css.html 59 这个也说明了这个问题 所以使用 >>> 符号可以做到这点

但是注意vue-loader的版本要高于12.2.0 这个功能是这个版本后才具有的

https://github.com/vuejs/vue-loader/releases/tag/v12.2.0 21

最后上一下测试的demo

<template>
  <div>
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
      </el-table>
      <div>
          <span>123</span>
          <p>321</p>
          <p>321</p>
      </div>

      </div>

    </template>
  <script>
  export default {
      data() {
      return {
          tableData: [{
          date: ‘2016-05-02‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 1518 弄‘
          }, {
          date: ‘2016-05-04‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 1517 弄‘
          }, {
          date: ‘2016-05-01‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 1519 弄‘
          }, {
          date: ‘2016-05-03‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 1516 弄‘
          }]
      }
      }
  }
  </script>
  <style lang="css" scoped>
      .el-table >>> th {
          background-color: #eee;
      }
  </style>

原文地址:https://www.cnblogs.com/wuchenggong/p/9656763.html

时间: 2024-10-05 19:57:29

修改element ui 默认样式最好的解释的相关文章

覆盖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组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式

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

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

修改easyui panel 默认样式

有这么个需求需要修改easyui panel头部中的背景色.于是根据panel中的最终被浏览器解析出来的类名,直接修改这个css样式,设置backgroud-color这个属性,发现不管用. 于是,就根据panel最后被解析出来的样式类名,手动的建这个类名,然后把背景色修改为白色,发现也无济于事. 经过摸索有两种办法: 1,在引入的easyui.css样式表中,添加没有背景色的样式,下面的样式必须放到easui.css中去,注意:单击建一个css文件,并把下面的代码拷过来就可以了.这个缺点是严重

element ui 修改默认样式

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

去掉或者修改 input、select 等表单的【默认样式 】

隐藏input等表单的默认样式的背景: textarea,select,input{-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;} 让div看起来像按钮: div{appearance:button;-moz-appearance:button; /* Firefox */-webkit-appearance:button; /* Safari 和 Chrome */

怎么修改单选框radio默认样式

jQuery 实现下这个效果,因此不一定是最佳方案,背景图直接从网上找到.:)先把 HTML 码好: <div>   <input type="radio" id="nba" checked="checked" name="sport" value="nba">   <label name="nba" class="checked" fo

修改 Semantic UI 的默认字体

Semantic UI 默认使用的是谷歌提供的字体,并且是直接使用了谷歌的官方链接.由于大家都知道的原因,谷歌网站在国内访问速度很差,甚至根本无法访问,还有就是可能会在离线环境下使用 Semantic UI,不能总是依赖于在线字体,所以需要对 Semantic UI 的源文件进行一下手动修改. 1.首先根据上篇教程(http://www.cnblogs.com/xwgli/p/4770984.html)获取到 Semantic UI 未编译前的源代码: 2.找到并用文本编辑器打开源码中的文件:

radio checkbox 修改默认样式

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>radio与checbox修改默认样式</title> 7 <style> 8 body{font-size: 12px;} 9 /*radio*/ 10 11 .radio-input label { font-weig