vue2.0 无法修改样式的解决方案

vue2.0 v-html渲染的dom及引用ui框架无法修改样式的解决方案

---

vue2.0 中通过v-html渲染的dom以及引用ui框架会有无法修改样式的问题，通过我的查询实践找到了以下解决方案，希望可以帮助有需要的小伙伴。

1.v-html渲染的富文本，无法在样式表中修改样式

比如下面的代码，在style标签中定义了div.htmlBox里面的p标签的color样式，但是实际样式并未生效：

<template>
    <div class="htmlBox" v-html='html'></div>
</template>

<script>
export default{
    data(){
        return {
            html: "<p>Hello World, Hello hexo</p>"
        }
    }
}
</script>

<style scoped>
.htmlBox p{
   color: red;
}
</style>

2.引用ui框架无法在vue文件的style中修改样式

比如下面的代码，在style标签中定义了.el-input的border样式，但是实际样式并未生效：

<template>
  <div class="serarch">
    <el-input ></el-input>
  </div>
</template>

<script>
export default{
    ......
}
</script>

<style scoped>
.search .el-input{
  border: 1px solid red;
}
</style>

解决方案：

其实很简单css只需要在设置样式的元素前面加 “>>>” 就可以实现这个功能了，less/scss 需要把 “>>>” 更改成 “/deep/” 即可。

1.css写法：

<style scoped lang="css">
.search >>> .el-input{
  border: 1px solid red;
}
</style>

2.scss/less写法：

<style scoped lang="scss">
.search{
  /deep/ .el-input{
    border: 1px solid red;
  }
}
</style>

scss新版本写法：

<style scoped lang="scss">
.search{
  ::v-deep .el-input{
    border: 1px solid red;
  }
}
</style>