Taro页面跳转后样式被重置，如何保持原页面CSS？

轩辕文茹提问于 2026-02-06 16:52:33 阅读 35

框架

在Taro项目里用了navigator标签跳转页面，发现目标页面的CSS样式全被重置了。比如这个按钮样式：


.button {
  background: linear-gradient(to right, #FF6B6B, #FECB52);
  border: none;
  padding: 12px 24px;
  border-radius: 20px;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

原页面显示正常，但跳转到detail页面后按钮直接变成默认样式。试过把CSS写在App.scss和组件内都无效，控制台也没报错。是路由配置哪里漏了吗？

路由配置

我来解答赞 5 收藏

反馈

1 条解答

淑丽 Lv1

当时我也卡在这，后来发现是Taro的页面样式加载机制搞的鬼。用navigator跳转时，新页面的CSS会触发重新注入，如果你用的是小程序框架（比如微信小程序），样式加载顺序和层级会出问题。

问题根源在于：你可能只在页面组件里写了样式，但Taro默认不会全局注入CSS，跳转后App.scss的样式没被正确继承。

解决方法是把共用样式写在App.scss里，然后在目标页面detail的组件里加上：

require('./App.scss')

或者更直接，在detail页面组件顶部引入全局样式：

import '../App.scss'

这样跳转后样式就不会被重置了。我当初是试了各种CSS模块化方案都不行，最后用这个土办法搞定的，虽然有点暴力但有效。

2026-02-06 17:02