Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use the component style of Weixin Mini Programs (Mini)." The explanation content in this article is simple and clear, easy to learn and understand. Please follow the idea of Xiaobian to study and learn "how to use the component style of Weixin Mini Programs" together.

component style

The style of the wxss file corresponding to the component is only valid for nodes within the wxml component. When writing component styles, note the following:

Components and pages referencing components cannot use id selectors (#a), attribute selectors ([a]), and tag name selectors. Use class selectors instead.

The use of descendant selectors (.a .b) in components and pages referencing components can have unexpected behavior in extreme cases, and should be avoided.

Child element selectors (.a>.b) can only be used between the view component and its child nodes, in situations where other components might cause unexpected results.

Inheritance styles, such as font and color, are inherited from outside the component into the component.

Styles in app.wxss and styles on the page where the component is located are invalid for custom components, except inherited styles.

#a { } /* Cannot use */[a] { } /* Cannot use */button { } /* Cannot use */.a > .b { } /* Unless.a is a view component node, it may not work */

In addition to this, a component can specify the default style of the node in which it resides, using the:host selector (requires Developer Tools support version 1.7.2 or later).

Code example:

/* component custom-component.wxss */:host { color: yellow;}:host(.dark) { color: black;} This text is yellow This text is black Thank you for reading, the above is the content of "How to use the component style of Weixin Mini Programs (Mini)." After studying this article, I believe you have a deeper understanding of how to use the component style of Weixin Mini Programs. The specific usage needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.