React SPA中后置路由CSS覆盖前置路由样式的根源咨询

我在搭建一个简单的React单页应用个人网站时，发现路由中靠后的页面的CSS选择器会覆盖靠前页面的样式——哪怕这些靠后的页面根本没被访问。比如Contact页面的字体大小样式就被Resume页面的样式覆盖了。

示例代码如下：

function App() {
  return (
    <div className='App'>
      <Router>
        <NavBar />
        <Routes>
          <Route path='/' element={<Home />} exact></Route>
          <Route path='/contact' element={<Contact />}></Route>
          <Route path='/resume' element={<Resume />}></Route>
          <Route path='/projects' element={<Projects />}></Route>
        </Routes>
    </Router>
  </div>
  );
}

根本原因解析 #

• CSS的加载与优先级规则：如果每个页面组件都是通过import引入自己的CSS文件，打包工具（如Webpack）会在构建时把所有引入的CSS合并到最终的样式文件中。当不同页面的CSS选择器优先级相同时，在最终样式文件中位置更靠下的样式会覆盖前面的。而路由中靠后的组件，其CSS导入顺序通常和路由组件的引入顺序一致，打包后靠后的页面CSS会排在样式文件的更下方，所以会覆盖前面页面的同优先级样式。
• React组件的打包特性：React路由只是控制组件是否渲染，但组件的代码（包括CSS导入）在构建阶段就已经被打包进bundle里了。如果没有配置按需加载，所有页面的CSS会在页面初始化时全部加载完成，和组件是否被渲染无关。所以即便某个页面没被访问，它的CSS已经存在于样式文件中，只要选择器优先级相同，就会按出现顺序覆盖前面的样式。

如果使用的是全局CSS（而非CSS Modules、CSS-in-JS这类有作用域的方案），这个问题会更突出，因为全局选择器的作用域是整个文档。

内容的提问来源于stack exchange，提问作者Connor