gpt4 book ai didi

javascript - 是否可以根据路由激活影响 html 标记的 css 类?

转载 作者:太空宇宙 更新时间:2023-11-04 06:09:31 25 4
gpt4 key购买 nike

我正在创建一个 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com