taro-vue实现样式穿透

微信小程序不支持属性选择器，也不支持动态为dom添加属性，所以vue的scoped不能使用。请使用cssModules替代。
一般起脚手架时候，会开启cssModules
注意：

使用cssModules后，修改组件样式就要用global了

style标签中使用cssModules

<template>
  <view :class="$style.index">
    
  </view>
</template>
<style module>
.index{
  color: red;
  :global(.el-btn){
    background: blue;
  }
  :global{
    .el-rap{
      .el-radio{
        color: #0f97b9;
      }
    }
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

外部文件使用

<template>
  <view :class="styles.index">
    
  </view>
</template>
<script>
import styles from './index.module.scss'
export default {
  setup(){
    return {
      styles
    }
  }
}

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

参考：

taro使用vue开发时的一些限制 (opens new window)

编辑

上次更新: 2023/02/08

← 页面间通信小程序服务通知→