Solution to the ineffective global style of the mini program custom component

When developing mini-programs using the native framework, I encountered a problem: the global styles defined in app.wxss were not effective in custom components. Later it was discovered that this was caused by the configuration of the mini-program component style isolation.

Too long to read

Add the following configuration to the component's json file and the global style will take effect.

//component.json
"styleIsolation": "apply-shared"

If you prefer to configure in a js file, or the version number is < 2.10.1, you can also write it in a js file with the same effect.

//component.js
Component({
  options:
    styleIsolation: 'apply-shared'
  }
})

If the version number is < 2.6.5, you can use the following configuration instead of styleIsolation: 'apply-shared'

//component.js
Component({
  options:
    addGlobalClass: true
  }
})

Component style isolation

The component's styleIsolation has three optional values:

• isolated: The default value, the styles inside and outside the component do not affect each other
• apply-shared: Receives external styles (including parent pages and global styles), but the styles within the component do not affect external styles
• shared: Receive external styles, and the styles in the component will be shared to the page

Demo test

For a more intuitive experience, I wrote a demo and conducted a simple experiment.

Define a component comp and introduce it in the page index:

<!-- comp.wxml -->
<view class="test1 testbox">comp1</view>
<view class="test2 testbox">comp2</view>
<view class="test3 testbox">comp3</view>

<!-- index.wxml -->
<comp />
<view class="test3 testbox">index3</view>

Then define the colors of test1, test2, and test3 as red, green, and blue in the global, page, and component worlds respectively (the style of testbox is omitted):

/* app.wxss */
.test1 {
  background-color: lightpink;
}

/* components/index.wxss */
.test2 {
  background-color: lightgreen;
}

/* components/comp.wxss */
.test3 {
  background-color: lightblue;
}

Then, different values ​​are taken for the styleIsolation property of the component, and the results are as follows:

As you can see, in the default isolated mode, neither the parent page nor the global style is effective; in apply-shared mode, the page and global styles can be applied to the component; in shared mode, the component style will in turn be applied to the parent page.

Priority

In addition, after testing, for the same selector, the style priority is component style > page style > global style, which is basically intuitive for components. However, if the component applies shared, the style in it will also override the style in the page, which is a bit strange.

In summary, I personally recommend that unless there is a special need, it is best to use the shared mode with caution, and try to minimize selector conflicts and mutual overwriting to avoid unnecessary supernatural accidents. For styles that need to be shared, they can be extracted to the global level or implemented by importing CSS files according to the situation.

Isolation configuration of pages

Since the pages of the mini program are actually components, the styleIsolation property can also be set. Unlike custom components, the default value of the page is share, so global styles can be applied to the page by default.

In addition, three additional attribute values ​​are added to the page. Although the documentation has their respective descriptions, I felt very confused after experimenting and did not understand their exact functions and differences at all. There was even a mysterious bug that the page's own style became invalid after the page was set to isolated / page-isolated. There may be problems in the implementation. Therefore, it is recommended not to change the styleIsolation configuration of the page casually. If you are interested, you can click the link at the end of the article to study and experiment on your own.

There is only one relatively certain option. After configuring page-shared, the page (and the components therein) will block the global styles in app.wxss, and the impact on other aspects should be small. You can try it if necessary.

References

WeChat official documents · Mini Programs

This concludes this article on how to solve the problem of global styles not taking effect on custom components of mini-programs. For more information on the problem of global styles not taking effect on mini-program components, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. We hope that everyone will support 123WORDPRESS.COM in the future!