小程序里的自定义组件(九):组件的外部样式externalClasses的使用

738 阅读1分钟

我们新建一个组件v-test,在组件的js代码里定义一个外部样式,名字叫做:test-calss


在组件的wxml代码里用上这个外部样式:


现在,我们在页面上使用这个组件,并用它的外部样式





运行结果如下:



在小程序的官方有这样一句话:



注意:在同一个节点上使用普通样式类和外部样式类时,两个类的优先级是未定义的,因此最好避免这种情况。

这句话怎么理解呢?我们做个测试:

我们在组件里不但定义了外部样式test-calss,还有一个组件本身的普通样式container,

这时,我们运行代码,外部样式是不生效的因为这两个样式谁覆盖谁,优先级是为定义、不确定的:



解决办法:在外部样式的后面加上 “!important”,来提高外部样式的优先级



所在我们在写外部样式的时候最好加上 “!important”避免上述问题。

所在我们在写外部样式的时候最好加上 “!important”避免上述问题。

所在我们在写外部样式的时候最好加上 “!important”避免上述问题。

重要的话说三遍。。。。