vue中修改element ui组件默认样式的两种方式

vue项目中经常会用到element ui，有时候需要修改默认的样式，比如表格，导航栏等，输入框等等。

可以用以下两种方式修改：

1.给组件加上id或者class，然后添加一个style，不要加scoped（vue可以有多个style），在组件里直接修改

2.外部引入css文件，默认样式会被覆盖

3.利用深度::v-deep深度修改组建的样式，可以直接写在到scoped作用域的style里面。（推荐）

也可以在外层加一个div，然后赋值一个class或者id，在scss中用这种语法修改对应的组件上的class名字即可

给vue项目中v-html的内容添加样式

1.使用css 深度选择器

<style scoped>

    .content >>>img { max-width: 100%}

</style>

2.使用less深度选择器

<style lang="less" scoped>

    @import '~@/assets/css/base.less'

    .content {

           /deep/ img {

                width:1rem

           }

    } 

</style>

Vue能不能实现数据驱动style样式呢？

官方提供的办法是在 <template> 里使用 :style 或者 :class 的方式赋值。但它们有个缺陷，即无法设置 伪元素 的css属性，例如，如果想设置

就没法用上述方法实现。

css提供了 var() 函数，能够动态设置样式的属性。Vue可以通过下面这两种方法实现对 var() 函数的传参。

---