如何不让CSS文件在React中继续

Question

我目前正在尝试设置一个多页React项目，但当我创建一个新页面时，它会应用每个CSS页面，而不仅仅是在*.js文档开头导入的页面。

例如，我有一个globalstyle.css文件，我正在使用它应用于几乎每个页面每页import '../css/globalstyle.css'。

然而，我有一个页面不希望它出现，但它仍然应用了globalstyle.css中的css。我猜这是因为App.js同时加载每个页面，但我不知道如何绕过这一点。

class App extends Component { 

render() {
return (
<React.Fragment>
<HashRouter name="app" path="/" handler={App} basename={process.env.PUBLIC_URL}>
<SideNav/>
<TopBar/>
<Switch>
<Route path = "/pages/dashboard.js" exact component={Dashboard} />
<Route path = "/pages/home.js" exact component={Home} />
<Route path = "/pages/tips.js" exact component={Tips} />
</Switch>
<Redirect from="/" exact to="/pages/home.js" />
</HashRouter>
</React.Fragment>
);
}
} 

我不想在主页上出现全球风格。

Answer 1

我所知道的绕过这一问题的唯一方法是使用css模块。CSS模块就是为了解决这个问题而引入的。

如果你正在使用create-react应用程序，那么它是开箱即用的。请参阅此处https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

如果你想在非创建反应应用程序中设置它，请参阅此处https://programmingwithmosh.com/react/css-modules-react/

希望这能有所帮助。