Можно ли активировать класс CSS, который влияет на тег HTML в зависимости от маршрута? - PullRequest
Новая
       13

Можно ли активировать класс CSS, который влияет на тег HTML в зависимости от маршрута?

0 голосов
/ 11 июня 2019

Я создаю реагирующий сайт, который ТОЛЬКО на домашней странице ("/") должен иметь: 

    html{
        overflow: hidden;
    }

но когда я перехожу на любую другую страницу ("/ что-то"), эта 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)

Я ожидаю, что страница "/" будет использовать css из Home.css, а другая страница не будет использовать Home.css

Ответы [ 2 ]

1 голос
/ 11 июня 2019

Ваш импорт CSS не добавляется и не удаляется динамически, все они копируются и вводятся в <head> или объединяются в один файл CSS при сборке пакетов.

Добавление или удаление стиля к вашему тегу <html> по мере навигации возможно, но это будет грязно.Будет гораздо проще (и разумнее) реструктурировать ваше приложение, чтобы вы могли применять overflow:hidden к содержащему элементу на некоторых страницах, но не на других.

0 голосов
/ 11 июня 2019

Это не может быть достигнуто css, но вы можете использовать встроенный стиль, как показано ниже: 

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function Home() {
  return (
    <div className="Home" style={{overflow: window.innerWidth >= 1024 ? 'hidden' : 'initial'}}>
      <h1>Home </h1>
    </div>
  );
}

function Page() {
  return (
    <div className="Page" style={{overflow: 'initial'}}>
      <h1>Page</h1>
    </div>
  );
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...