三种方式解决vue中v-html元素中标签样式
当我们引入第三方组件或加载html元素时,想修改下样式,就可以用以下三种方式:一.去掉<style scoped>中的scoped这个方法不建议使用,会改变布局二.定义两个style标签,一个含有scoped属性,一个不含有scoped属性使用方法为<style scoped> .introduction{ width: 100%;
·
当我们引入第三方组件或加载html元素时,想修改下样式,就可以用以下三种方式:
一.去掉<style scoped>中的scoped
这个方法不建议使用,会改变布局
二.定义两个style标签,一个含有scoped属性,一个不含有scoped属性
使用方法为
<style scoped>
.introduction{
width: 100%;
margin-bottom: 3rem;
}
</style>
<style>
.introduction img{
width: 100%;
object-fit: fill;
}
</style>
三.通过 >>>
可以使得在使用scoped属性的情况下,穿透scoped,修改其他组件的值
使用模板为:
.introduction>>> img{
width: 100%;
object-fit: fill;
}
写的不清晰,如有问题请评论。
更多推荐
已为社区贡献28条内容
所有评论(0)