问题
在使用element-ui等第三方组件时,有时候想要修改组件内的样式,但不成功
解决方案
第一种
-【方案一】加上一个非scoped样式
根据文档可知,vue可以混用本地和全局样式,因此对子组件的非根元素样式修改,可以单独放在一个非 scoped 样式中
<style>
.el-button span{
background:red;
}
</style>
<style scoped>
/* 本地样式 */
</style>
- 第二种
【方案二】采用/deep/
加上/deep/,组件的样式可以渗透到子组件相应的元素上
<style lang="less" scoped>
.test{
/deep/ .el-button span{
background:red;
}
}
</style>