微信小程序中样式无效

子组件使用全局样式

需要在组件js中加入 styleIsolation

Component({
  options: {
    styleIsolation: 'isolated' 
      // 默认值 isolated(启动隔离)、 
      // apply-shared(页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面) 、
      // shared(wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件)、
  }
})

 

 

父组件给子组件添加样式

微信小程序里父组件是不允许直接修改子组件样式的，必须在子组件里暴露样式名称，才能在父组件里重新定义样式。

// 组件 js
Component({
  externalClasses: ['parent-class']
});
// 组件 wxml
<view class="parent-class"></view>

// 父页面 wxml
<w-more-img parent-class="parentClass"/>

// ***** class名不能使用驼峰，否则不生效 *****

如果要重写子组件中的属性，需要用到！important

.parentClass{
  background: red!important;
}