UniApp 组件内修改组件内的组件的样式,穿透组件中的组件样式
- 这是一个页面
- 这是 a 组件
- 这是 b 组件
页面可以修改页面引入的组件样式 直接使用 /deep/
例如：
main页面 修改 a组件的样式
<style lang="scss" scoped>
<template>
<view>
<a-d class="a-d"></a-d>
</view>
</template>
<script>
import a from "@/components/";
export default {
components: {
"a-d": a
}
}
</script>
<style lang="scss">
.a-d /deep/ .a{
color: red;
}
</style>
</style>
重点：组件中样式不能直接穿透组件，需要在页面中穿透组件（也就是说在页面中组件的样式再写组件中的组件的样式），参考下列写法
这是一个页面
<template>
<view>
<a-d class="a-d"></a-d>
</view>
</template>
<script>
import a from "@/components/";
export default {
components: {
"a-d": a
}
}
</script>
<style lang="scss" scoped>
.a-d /deep/ .a{
color: red;
.b{
color: blue;
}
}
</style>
这是 a 组件
a 组件不包含样式
<template>
<view class="a">
<text>a</text>
<b-d class="b-d"></b-d>
</view>
</template>
<script>
import b from "./";
export default {
components:{
"b-d": b
},
name:"a"
}
</script>
这是 b 组件
b 组件不包含样式
<<template>
<view class="b">
<text>b</text>
</view>
</template>
<script>
export default {
name:"b",
}
</script>