时间戳

首页 > 解决方案 > 是否可以根据路由激活影响 html 标记的 css 类？

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

问题描述

我正在创建一个仅在主页（“/”）中应具有的反应站点：

    html{
        overflow: hidden;
    }

但是当我移动到 css 处于活动状态的任何其他页面（“/something”）时
（css 位于仅在 home.js 中链接的 home.css 中）

以下所有代码都是 App.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

标签： javascriptcssreactjsreact-router

解决方案

<head>您的 css 导入不会动态添加和删除，当您构建捆绑软件时，它们都会被隐藏并注入到单个 css 文件中或捆绑到单个 css 文件中。

可以在导航时向标签添加或删除样式，<html>但这会很混乱。重新构建您的应用程序将更容易（也更明智），以便您可以将其应用于overflow:hidden某些页面上的包含元素，但不能应用于其他页面。

推荐阅读