Question

我有组分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？

Answer 1

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

组件渲染时加载组件CSS

1 个答案: