Custom components -- styles

1. By default , The style of a custom component is only valid for the current component , Will not affect... Outside the component UI structure , As shown in the figure ：

• Components A The style of does not affect the component C The style of
• Components A The style of does not affect the style of the applet page
• The style of the applet page does not affect the component A and C The style of

 2. Notes on component style isolation ：

• app.wxss The global style in is not valid for the component
• Only class Selectors will have the effect of style isolation ,id Selectors 、 Attribute selector 、 Label selectors are not affected by style isolation
• Suggest ： It is recommended to use... In components and pages referencing components class Selectors , Do not use id、 attribute 、 tag chooser

3. Modify style isolation options for components

By default , The style isolation feature of custom components can prevent the problem that the styles inside and outside the components do not interfere with each other , But sometimes , We hope that the outside world can control the internal style of components , here , Can pass styleIsolation Modify style isolation options for components , Usage is as follows

// In the component's .js Add the following configuration in the file 
Component({

    options:{
        styleIsolation:'isolated'
    },

styleIsolation Options for ： 

Optional box	The default value is	describe
isolated	yes	Indicates that style isolation is enabled , Inside and outside of custom components , Use class The specified style will not affect
apply-shared	no	Express page wxss Styles will affect custom components , But custom components wxss The specified style will not affect the page
shared	no	Show page wxss Styles will affect custom components , Custom components wxss The style specified in will also affect the page and other settings apply-shared or shared The custom component of