如何使用 react js 为不同的页面使用不同的 CSS 文件

Question

I am building my first react app and i have a problem ! I am trying to use different css files for different Route. But when i import a second css file(loginpage.css), the first page (homepage) is changing !

How can i use a css file by page ?

Thanks you for your help !

 import React from 'react'; import PropTypes from 'prop-types' import { Route } from 'react-router-dom'; import HomePage from './components/pages/HomePage'; import LoginPage from './components/pages/LoginPage'; import DashboardPage from './components/pages/DashboardPage'; import SignupPage from './components/pages/SignupPage'; import ConfirmationPage from './components/pages/ConfirmationPage'; import UserRoute from './components/routes/UserRoute'; import GuestRoute from './components/routes/GuestRoute'; import './static/stylesheets/default.css'; import './static/stylesheets/pandoc-code-highlight.css'; import styles from './static/stylesheets/homepage.css'; import styles1 from './static/stylesheets/loginpage.css'; const App = ({ location }) => ( <div classname=""> <div classname={styles}> <Route location={location} path="/" exact component={HomePage} /> </div> <div className={styles1.app}> <GuestRoute location={location} path="/login" exact component={LoginPage} /> </div> <Route location={location} path="/confirmation/:token" exact component={ConfirmationPage} /> <GuestRoute location={location} path="/signup" exact component={SignupPage} /> <UserRoute location={location} path="/dashboard" exact component={DashboardPage} /> </div> );

Answer 1

You can do it using props:

const Front = (props) => {
    if(props.match.params.page === 'home'){
        require("./css/bootstrap.min.css");
        require("./css/style.css");
        require("./css/vendors.css");
        require("./css/custom.css");
    }
    return (
        <div>
            <Header />
            { props.match.params.page === 'home' ? <Login /> : null }

        </div>
    )
}

Answer 2

Include your CSS or SCSS file in specific component

Example:

// this is rule component which have rule scss file 
import './assets/css/rule.scss';
class Rules extends React.Component {

} 

// this is report which have report.scss file
import './assets/css/report.scss';
class Report extends React.Component {

} 

Now its depend how you make structure of your component as for this example i kept all this scss file is assets folder.