样式设置scoped属性带来的问题
通常我们在写样式的时候会在style标签中加上scoped属性,相信这个属性的作用大家都很清楚(Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范),但是这样有时候也会遇到问题:
假如我写了一个公用组件,想在父组件中改公共组件的样式,用通常的样式覆盖是不可以的。
解决方案
这时候需要用到 /deep/。
<style lang="less" scoped>
.goto-result-btn{
font-size: .2rem;
width: 4rem;
height: .6rem;
line-height: .6rem;
text-align: center;
border-radius: .3rem;
position: fixed;
bottom: .5rem;
left: 50%;
margin-left: -2rem;
background: #ccc;
}
//test和test-text是引用的子组件的类
.test /deep/ .test-text{
font-size: 1rem;
}
</style>