Импортировать только стили, определенные для каждого компонента на каждом маршруте

Question

Есть ли способ импортировать только стили, специфичные для каждого компонента в React? Глядя на приведенный ниже код, стили как из компонента «Домой», так и из компонента «Панель мониторинга» импортируются в App.js. Поэтому, когда вы переходите к / Home, вы видите стили, которые были импортированы из Dashboard и наоборот.

Другими словами, существует ли способ при переходе к компоненту наследовать только его собственные стили, а не другие стили, которые автоматически импортируются при импорте других компонентов?

Home.js

import '../Styles/css/style.css'

class Home extends Component {
   ....
}

App.js

import {Dashboard} from './Components/Dashboard/Dashboard';
import {Home} from './Components/Home';

class App extends Component {
  render() {
    return (

      <React.Fragment>
          <Router>     
              <Switch>
                <Route exact path="/Home" component={Home} />
                <Route path="/Dashboard" component={Dashboard}/>
              </Switch>
           </Router>
      </React.Fragment>

    );
  }
}

Answer 1

Почему вы не используете Styled Component? Недавно я использовал это в проекте, у меня был отдельный и сегментированный стиль для каждого компонента, который не влияет друг на друга. https://www.styled -components.com /