elementUI 样式修改

1，通过全局样式

新建common.css,并在main.js中引入import "./assets/style/common.css";

可以用来修改项目整体颜色风格

2单个组件<style></style>中不要加scope,修改第三方样式的不加，自己的样式加

<style></style>

<style scoped></style>

3：deep将废弃：

/deep/ 深度修改标签样式

找到需要修改的 ElementUI 标签的类名，然后在类名前加上 /deep/ ，可以强制修改默认样式。这种方式可以直接用到有 scoped 属性的 style 标签中。

// 修改级联选择框的默认宽度
/deep/ .el-cascader {
  width: 100%;
}

4：通过内联样式 或者 绑定类样式覆盖默认样式

通过内联样式 style ，绑定类样式的方式，可以在某些标签中可以直接覆盖默认样式，不是很通用。具体实例如下：
内联样式style的方式：

<el-button :style="eSt">默认按钮</el-button>
<script>
    export default {
      data() {
        return {
            eSt: {
                color: "white",
		
            }
        };
      }
    }
</script>

通过绑定修改样式方式修改：

<el-button :class="[selfbutton]">默认按钮</el-button>
<script>
  export default {
    data() {
      return {
        selfbutton: "self-button"
      };
    } 
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.self-button {
    color: white;
    margin-top: 10px;
    width: 100px;
    background-Color: cadetblue;
}
</style>

5:>>>

深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

<style scoped>
.a >>> .b { /* ... */ }
</style>

• 上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

• 有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作

 

<style scoped lang='less'>
	@deep: ~'>>>';
	.box {
        @{deep} .title {
            
        }
	}
</style>

• ~表示转义

  转义允许您将任意字符串用作属性或变量值。除插值外，里面的任何东西~"anything"或~'anything'原样使用。

  .weird-element {
    content: ~"^//* some horrible but needed css hack";
  }
  

  结果是：

  .weird-element {
    content: ^//* some horrible but needed css hack;
  }
  

• 选择器需要加大括号{}

  版本：1.4.0

  // Variables
  @my-selector: banner;
  
  // Usage
  [email protected]{my-selector} {
    font-weight: bold;
    line-height: 40px;
    margin: 0 auto;
  }
  

  编译为：

  .banner {
    font-weight: bold;
    line-height: 40px;
    margin: 0 auto;
  }