注意不是组件继承页面的样式,是组件继承组件的样式。
可能标题不太好理解,举个例子。
现有父级页面index/index.html 和 4个自定义组件,嵌套情况如下,
index/index.html 页面中引入组件A
<view>
<view>这是index/index.html首页</view>
<componentA></componentA>
</view>
组件A中的代码如下:
组件A中继续引入组件B、C、D...
<view class="box-a">
<view>这是A组件</view>
<componentB>
<componentC>
<componentD></componentD>
</componentC>
</componentB>
</view>
我在组件A的.wxss中写了一些样式如下:
.box-a {
background: #ccc
}
.box-a .box-a__d{ /* 组件a中设置组件d的样式 */
background: #f00
}
组件D的wxml如下:
<view>
<view class="box-a__d">这是A组件</view>
</view>
现在的问题就是:组件D不会继承组件A中设置的样式,请问要怎么搞。
我尝试在组件D中添加addGlobalClass 或 styleIsolation 但都没有用。如果把组件A中的样式写到app.wxss中是可以的,但我现在不能写到page级别的页面中,我需要组件控制组件。
为什么组件D的样式不在组件D里写呢?
封装成组件不就是为了可复用性、可维护性吗