组件渲染时加载组件 css答案

【问题标题】：Load component css when component render组件渲染时加载组件 css
【发布时间】：2018-12-13 23:45:15
【问题描述】：

我有组件 A 和组件 B。

组件 A.js

import React from 'react'
import './A.css'

export default class A extends React.Component {
   ....
}

组件 B.js

import React from 'react'
import './B.css'

export default class B extends React.Component {
   ....
}

App.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Route, Switch, BrowserRouter } from 'react-router-dom'
import A from './A'
import B from './B'

ReactDOM.render(
  <BrowserRouter>
    <Switch>
        <Route exact path='/A' component={A}/>
        <Route exact path='/B' component={B}/>
      </Switch>
  </BrowserRouter>,
  document.getElementById('root'));

当我访问 /A 时，它会加载 a.css 和 b.css，反之亦然。有没有办法仅在组件在其路由上呈现时才呈现各个组件的 CSS？

【问题讨论】：

听起来您在这些组件中使用相同的选择器有不同的规则，并且加载两个 CSS 文件会覆盖其中一个中的一些规则？这是您遇到的实际问题吗？
是的，另外我不想在组件 A 渲染时加载组件 B css。
关于 CSS 问题，您可以在主包装元素中添加一个类：<div className="compA">...</div>，然后将 .compA 放在所有 CSS 选择器的前面。
有什么办法不改变类名吗？我找到了这种方式，但不确定它是否正确？ render() { import('./SampleComponent.css'); }
那就试试吧。无论如何，如果您的问题已经包含您自己尝试过的内容，那将是一件好事。

标签： javascript css reactjs react-router

【解决方案1】：

在这种情况下，您可以使用styled components 进行特定于组件的样式设置。

【讨论】：