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

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!

You may also be interested in:
  • A detailed introduction to WeChat Mini Program definition of global data, function reuse, templates, etc.
  • How to implement global reload in WeChat Mini Program
  • Detailed explanation of the functions and usage of global variables in WeChat applet
  • How to implement WeChat applet global variable change monitoring
  • Analysis of the setting, use, and modification process of WeChat applet global variables
  • Implementation code of customizing single page and global navigation bar of mini program
  • WeChat applet calls remote interface to assign values ​​to global array code example

<<:  How to use Linux locate command

>>:  36 principles of MySQL database development (summary)

Recommend

About using Alibaba's iconfont vector icon in Vue

There are many import methods on the Internet, an...

Various methods to implement the prompt function of text box in html

You can use the attribute in HTML5 <input="...

This article takes you into the world of js data types and data structures

Table of contents 1. What is dynamic typing? 2. D...

Solve the problem of IDEA configuring tomcat startup error

The following two errors were encountered when co...

HTML sub tag and sup tag

Today I will introduce two HTML tags that I don’t...

Two implementations of front-end routing from vue-router

Table of contents Mode Parameters HashHistory Has...

Docker learning method steps to build ActiveMQ message service

Preface ActiveMQ is the most popular and powerful...

Detailed explanation of the application of CSS Sprite

CSS Sprite, also known as CSS Sprite, is an image...

Design Reference Beautiful and Original Blog Design

All blogs listed below are original and uniquely ...

Quickly solve the problem that CentOS cannot access the Internet in VMware

Yesterday I installed CentOS7 under VMware. I wan...

How to use resize to implement image switching preview function

Key Points The CSS resize property allows you to ...

Implementation principle and configuration of MySql master-slave replication

Database read-write separation is an essential an...