02 组件命名遇见的坑

主页面中使用的组件,命名为my-margintop
在主页面。写css样似不起作用的哈
因为官方说的  组件对应 wxss 文件的样式,【只对组件 wxml 内的节点生效】
<view class="top-header">
    <!-- 左边姓名  右边头像 -->
    <topleftnamerihtdec class="my-margintop"></topleftnamerihtdec>
</view>

详细解释

主页面。没有效果
.my-margintop {
    margin-top: 120rpx;
}

如何解决了。????
只能够在子组件中对向的wxss去写样似哈

官方说的

组件对应 wxss 文件的样式,【只对组件 wxml 内的节点生效】编写组件样式时,需要注意以下几点:

组件和引用组件的页面不能使用 id 选择器(#a)、属性选择器([a])和标签名选择器,请改用 class 选择器。
组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。
子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。
继承样式,如 font 、 color ,会从组件外继承到组件内。
除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效(除非更改组件样式隔离选项)。

#a { } /_ 在组件中不能使用 _/
[a] { } /_ 在组件中不能使用 _/
button { } /_ 在组件中不能使用 _/
.a > .b { } /_ 除非 .a 是 view 组件节点,否则不一定会生效 _/
posted @ 2020-03-15 18:54  何人陪我共长生  阅读(154)  评论(0编辑  收藏  举报