Seulement importer des styles spécifiques à chaque composant sur chaque route

Question

Existe-t-il un moyen d'importer uniquement les styles spécifiques à chaque composant en React? En regardant le code ci-dessous, les styles des composants "Accueil" et "Tableau de bord" sont importés dans App.js. Ainsi, lorsque vous naviguez vers /Accueil, vous voyez les styles importés depuis le Tableau de bord et vice versa.

En d'autres termes, en naviguant vers un composant, est-il possible qu'il n'hérite que de ses propres styles et non des autres styles qui sont automatiquement importés en important d'autres composants?

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 (

    );
  }
}

Answer 1

Pourquoi n'utilisez-vous pas Styled Component? Récemment, j'ai utilisé cela dans un projet, j'avais séparé et segmenté le style pour chaque composant qui ne s'affectent pas mutuellement. https://www.styled-components.com/