Question

我正在构建我的第一个反应应用程序，我有一个问题！我试图为不同的路由使用不同的CSS文件。但是当我导入第二个css文件（loginpage.css）时，第一页（主页）正在改变！

如何逐页使用css文件？

感谢您的帮助！

＆＃13;

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

＆＃13;

Answer 1

将您的CSS或SCSS文件包含在特定组件

中

示例：

// 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 {

}

现在它取决于你如何制作组件的结构，就像这个例子我保留所有这个scss文件是assets文件夹。

Answer 2

您可以使用道具来做到这一点：

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

如何使用不同的CSS文件为不同的页面与反应js

2 个答案: