Question

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

    html{
        overflow: hidden;
    }

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

以下所有代码是 App.js：

    const App = () => {
      return (
        <Router>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/page" component={Page} />
          </Switch>
        </Router>
      );
    }

Home.js：

    import './Home.css';

Home.css：

    @media (min-width: 1024px) {
        html {
            overflow: hidden;
        }
    }

Pagge.js：

    import './Page.css';

Page.css：

    (nothing)

我希望页面“ /”使用Home.css的CSS，其他页面不使用Home.css

Answer 1

您的css导入不会动态添加和删除，它们都将悬停并注入到<head>中，或者在构建捆绑包时捆绑到单个css文件中。

在导航时可以在<html>标签中添加或删除样式，但这很麻烦。重新构造应用程序会容易得多（也更精明），这样您就可以将overflow:hidden应用于某些页面上的包含元素，而不能应用于其他页面上。

Answer 2

css无法实现，但是您可以使用如下所示的内联样式：

library

是否有可能根据路由激活影响html标签的css类？

2 个答案: