taro3 externalClasses 无效

[victorshen2020]

相关平台

微信小程序

小程序基础库: 2.17.0
使用框架: React

复现步骤

需要引入一个叫modifacemakeup的第三方插件，在taro src中的相关配置如下：
src/app.config.js

export default {
  pages: [
    "pages/index/index",
    
  ],
  plugins: {
    "modifacemakeup": {
      "version": "4.5.0",
      "provider": "wx81abb20032c139db"
    }
  }
}

src/pages/index

export default {
  usingComponents: {
    "makeup-view": "plugin://modifacemakeup/makeup-view"
  },
  disableScroll: false
}

因为这个插件中的component有一个externalClasses 叫view-class
src/pages/index.jsx

export default class TryOn extends Component {

  render() {
    return (
      <View className='try-on-wrapper'>
        <View className="makeup-view-wrapper">
          <makeup-view view-class="makeup-view-class"/>
        </View> 
      </View>
    )
  }
}

src/pages/index.styl

.makeup-view-class {
  width: 750prx;
  height: 500rpx;
}

期望结果

makeup-view 的宽高会是我们设置的高度

实际结果

没有效果

环境信息

Taro v3.2.10


  Taro CLI 3.2.10 environment info:
    System:
      OS: macOS 11.3.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.16.1 - /usr/local/bin/node
      npm: 6.14.12 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: ^3.2.7 => 3.2.7
      @tarojs/components: 3.2.5 => 3.2.5
      @tarojs/mini-runner: 3.2.5 => 3.2.5
      @tarojs/react: 3.2.5 => 3.2.5
      @tarojs/runtime: 3.2.5 => 3.2.5
      @tarojs/taro: 3.2.5 => 3.2.5
      @tarojs/webpack-runner: 3.2.5 => 3.2.5
      babel-preset-taro: 3.2.5 => 3.2.5
      eslint-config-taro: 3.2.5 => 3.2.5
      react: ^17.0.0 => 17.0.2

[moseszhou]

样式#

在 Taro Next 中，没有 组件的外部样式和全局样式 的概念，组件的配置（config.js）是无效的，页面和入口文件引入的 CSS 都会变成全局 CSS ，没有了 externalClasses 和 addGlobalClass 这两个概念。

如果你需要带作用域的 CSS，可以考虑使用 CSS Modules。

文档里面说了，不在支持

[Chen-jj]

针对纯 Taro 项目，的确没必要使用 externalClasses 和 addGlobalClass。楼上正解。

[Chen-jj]

@victorshen2020 楼主的情况比较特殊，使用了第三方原生插件，插件使用了 externalClasses 这是调用方没办法控制的。

使用插件较为麻烦，我使用了原生自定义组件进行测试（道理和插件一样），是可以成功传递 externalClasses 的。可以从下列方面进行排查：

1. 源码传入的属性名应为驼峰形式，针对本例就是 <makeup-view viewClass="makeup-view-class"/>
2. 打开 dist/base.wxml，查找 makeup-view 的相关 template，<makeup-view> 上应该有 viewClass 属性

附上测试成功的代码：

<!-- 原生组件 custom-component.wxml -->
<custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>

// 原生组件 custom-component.js
Component({
  externalClasses: ['my-class']
})

// Taro page.js
function Index () {
  return (
    <custom-component myClass="red-text" />
  )
}

// Taro page.scss
.red-text {
  color: red
}