我正在创建一个 React 网站，主页中只有 ("/") 应该有:
html{
overflow: hidden;
}
但是当我移动到 css 处于事件状态的任何其他页面(“/something”)时
(该 css 在仅在 home.js 中链接的 home.css 中)
以下所有代码都是 应用程序.js:
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/page" component={Page} />
</Switch>
</Router>
);
}
首页.js:
import './Home.css';
首页.css:
@media (min-width: 1024px) {
html {
overflow: hidden;
}
}
页面.js:
import './Page.css';
页面.css:
(nothing)
我希望页面“/”使用 Home.css 的 css 而另一个页面不使用 Home.css
最佳答案
您的 css 导入不是动态添加和删除的，它们都被收集起来并注入(inject)到 <head> 中或在构建 bundle 时捆绑到单个 css 文件中。
为您的 <html> 添加或删除样式导航时标记是可能的，但它会很困惑。重新构建您的应用程序将更容易(也更明智)，以便您可以应用 overflow:hidden到某些页面上的包含元素，而不是其他页面上的包含元素。
关于javascript - 是否可以根据路由激活影响 html 标记的 css 类？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56541265/