两个页面共用一个组件，页面返回保留上一个页面的组件样式

[Sylvia-00]

相关平台

H5

复现仓库

https://github.com/Sylvia-00/taro-demo.git
浏览器版本: Chrome131.0.6778.205、Edge131.0.2903.112
使用框架: React

复现步骤

样式使用css module；
1、构建成H5打开（build:h5）- ListWrapper组件（组件内部颜色粉色）；
2、首页引入ListWrapper组件，配置样式为红色（显示正常）；
3、从首页点击按钮跳转到详情页，详情页ListWrapper组件，配置样式为蓝色（显示正常）；
4、从详情页返回到首页，首页的ListWrapper组件样式重置为组件内部样式（显示粉色；

期望结果

希望第四点的样式为第2点一致（显示红色）；
首页不应该把存在详情页的样式；

实际结果

从详情页返回到首页，首页的ListWrapper组件样式重置为组件内部样式（显示粉色）；
且审查首页元素样式有两个一样的ListWrapper组件样式，首页配置的样式被详情页组件的默认样式覆盖了

环境信息

  Taro CLI 4.0.8 environment info:
    System:
      OS: Windows 11 10.0.22631
    Binaries:
      Node: 20.10.0 - D:\nodejs\node.EXE
      Yarn: 1.22.22 - D:\nodejs\yarn.CMD
      npm: 10.2.3 - D:\nodejs\npm.CMD
    npmPackages:
      @tarojs/cli: 4.0.8 => 4.0.8 
      @tarojs/components: 4.0.8 => 4.0.8 
      @tarojs/helper: 4.0.8 => 4.0.8 
      @tarojs/plugin-framework-react: 4.0.8 => 4.0.8 
      @tarojs/plugin-platform-alipay: 4.0.8 => 4.0.8 
      @tarojs/plugin-platform-h5: 4.0.8 => 4.0.8 
      @tarojs/plugin-platform-jd: 4.0.8 => 4.0.8 
      @tarojs/plugin-platform-qq: 4.0.8 => 4.0.8 
      @tarojs/plugin-platform-swan: 4.0.8 => 4.0.8 
      @tarojs/plugin-platform-tt: 4.0.8 => 4.0.8 
      @tarojs/plugin-platform-weapp: 4.0.8 => 4.0.8
      @tarojs/react: 4.0.8 => 4.0.8
      @tarojs/runtime: 4.0.8 => 4.0.8
      @tarojs/shared: 4.0.8 => 4.0.8
      @tarojs/taro: 4.0.8 => 4.0.8
      @tarojs/taro-loader: 4.0.8 => 4.0.8
      @tarojs/webpack5-runner: 4.0.8 => 4.0.8
      babel-preset-taro: 4.0.8 => 4.0.8
      eslint-config-taro: 4.0.8 => 4.0.8
      react: ^18.0.0 => 18.3.1
      taro-ui: ^3.2.1 => 3.3.0

[erweixin]

这个原因主要是这个：
taro 模拟了小程序多 webview 的情况，页面跳转以后首页和详情页其实都挂载在页面中，只不过首页是隐藏了。

• 首页单独存在的时候：首页 class = styles.main, props.customClass_AA。此时只有首页自己的 index.css 文件。
• 详情页加载完后，详情页 class = styles.main, props.customClass_BB。然后挂载了详情页的 css，css 文件的顺序是 .index.css -> detail.css。index 和 detail 中 main 这个 class 的权重一样。detail 中的 main 后定义，所以优先级更高。
• 详情页卸载以后，css 文件没有卸载。所以生效的还是 detial.css 中定义的 main。

临时解决方案：可以包裹一层，提升 customClass 的权重，类似

.index {
  .customClass{
    background-color: red;
  }
}

我看下能不能在详情页卸载的时候卸载 css 文件，或者做下页面间的样式隔离。