vue 修改ui框架样式 汇总 样式穿透

说明

1、方法一：配置全局的样式，请查看 vux 怎么用 样式变量 修改主题配色(vux只是举个例子，其他的ui框架也可以找找，看是否有相似的配置)
2、方法二：全局样式层级覆盖。简单说就和我们平时写html、css没啥区别，在index.html引入就行

    .el-input__inner {
        height: 48px;
    }

如果需要使用预编译器，直接写style注意不要加scoped，所写的样式就是全局样式，如果有优先级问题 就加一个！important

<style>
    .el-input__inner {
        height: 48px  !important;
    }
</style>

3、局部样式修改
有时候只是单个路由里面的ui框架样式需要修改，并不想影响全局样式，首先想到的可能就是....

<style css="less">
.detail{
    .el-input__inner {
        height: 48px;
    }
}
</style>

直接写style注意不要加scoped，然后用一个组件最外层的class包裹住，就不会改到所有的组件的样式了。
重点都是不要加scoped，这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域，编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover，而ui框架的el并没有参加这个编译，所以写的样式没有生效。
那么问题来了，加了scoped是不是就没办法修改ui框架的样式，答案当然是否定的，有一个名词叫做“样式穿透”，写法也很简单

<style css="less">
.detail /deep/ .el-input__inner {
        height: 48px;
}
</style>

最初是stylus 的样式穿透>>>被广泛使用，less和sass的文档很少，搜索很多网站可能会在不起眼的位置有一个/deep/，姑且这样理解/deep/ 就是less和sass的样式穿透，反正我用的很开心啊，哈哈哈