Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Sylvia-00 opened this issue Jan 8, 2025 · 1 comment

Comments

@Sylvia-00
Copy link

相关平台

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
Copy link

erweixin commented Jan 8, 2025

这个原因主要是这个:
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 文件,或者做下页面间的样式隔离。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants