vue中修改组件样式不起作用
2020-10-22 本文已影响0人
吴wuwu
原因：
<style lang="scss" scoped>
也就是scoped这个东西
scoped的作用：在style标签上添加scoped属性，以表示它的样式作用于当下的模块，可以使组件的样式不相互污染。
所以，把它去掉就可以了。
但是还有一个问题，去掉这个后，所有页面的样式是会相互影响的。
解决办法：
一、在每个页面中，加个容器，给个id 或 class 而且每个页面的都要不一样就行。
二、scoped样式穿透：
scoped虽然避免了组件间样式污染，但是很多时候我们需要修改组件中的某个样式，但是又不想去除scoped属性。
1. 使用/deep/
//Parent
<template>
<div class="wrap">
<Child />
</div>
</template>
<style lang="scss" scoped>
.wrap /deep/ .box{
background: red;
}
</style>
//Child
<template>
<div class="box"></div>
</template>
2. 使用两个style标签
//Parent
<template>
<div class="wrap">
<Child />
</div>
</template>
<style lang="scss" scoped>
//其他样式
</style>
<style lang="scss">
.wrap .box{
background: red;
}
</style>
//Child
<template>
<div class="box"></div>
</template>
