reactjs - 仅导入特定于每个路由上每个组件的样式

Question

有没有办法只导入 React 中每个组件特有的样式？查看下面的代码，“Home”组件和“Dashboard”组件的样式都导入到 App.js 中。因此，当您导航到/Home 时，您会看到从仪表板导入的样式，反之亦然。

也就是说，当导航到一个组件时，有没有办法让它只继承自己的样式，而不继承通过导入其他组件而自动导入的其他样式？

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

为什么不使用样式组件？ 最近我在一个项目中使用了这个，我对每个组件进行了独立分段的样式，互不影响。 https://www.styled-components.com/