Question

有没有办法只导入React中每个组件的特定样式？看下面的代码，来自“ Home”组件和“ Dashboard”组件的样式都导入到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

为什么不使用样式化组件？最近，我在一个项目中使用了此样式，我为每个不会相互影响的组件分离和分段了样式。 https://www.styled-components.com/

仅导入特定于每个路线上每个组件的样式

1 个答案: