[英]How to use different CSS files for different page with react js
我正在构建我的第一个 React 应用程序,但遇到了问题! 我正在尝试为不同的路由使用不同的 css 文件。 但是当我导入第二个 css 文件(loginpage.css)时,第一页(主页)正在改变!
如何按页使用 css 文件?
谢谢你的帮助!
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> );
您可以使用道具来做到这一点:
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
或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
文件夹。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.