[Solved]-How to use different CSS files for different page with react js-Reactjs

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.

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>
    )
}