ReactJs 每页使用 CSS
ReactJs using CSS per page
我正在使用 ReactJs 构建一个包含 3 个路由的简单应用程序:
"/" <- index.js
"/login" <- login.js
"/register" <- register.js
要正确查看这些页面,我需要导入 CSS-files。
但是,如果我为“/login”路由导入 CSS-file,它也会加载到“/”路由中。
这是我的文件:
app.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import './App.css';
import Index from './pages/index';
import Login from './pages/login';
import './css/bootstrap.css';
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route exact path='/' component={Index} />
<Route exact path='/login' component={Login} />
</Switch>
</Router>
);
}
}
export default App;
index.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import logo from '../logo.svg';
import '../App.css';
class Index extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
<Link to={'/login'}>Login</Link>
</p>
</div>
);
}
}
export default Index;
和login.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import '../css/login.css';
import '../css/main.css';
import logo from '../img/s900x300.png';
import back from '../img/back.svg';
import view from '../img/view.svg';
export default class Login extends Component {
render() {
return (
<div>
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button className="back">
<a><img alt="" className="left" src={back}/></a>
</button>
<div className="background">
</div>
<div id="login" className="container login">
<img alt="" src={logo} />
<center><h5>‌</h5></center>
<input name="user" type="text" required placeholder="Benutzername oder Email"/>
<div className="password">
<input name="pw" required maxLength="64" type="password" placeholder="Passwort"/>
<button id="view_toggle">
<img alt="" src={view}/>
</button></div>
<form>
<button id="login" className="on">Login</button>
</form>
<center><b><a>back</a> | <Link to={'/register'}><a>Create account</a></Link></b></center>
</div>
<script src="/js/bootstrap.min.js"></script>
</div>
);
}
}
例如:在我的 login.css 中,想要我的 body 的背景图片。但这个背景也适用于“/”。我怎样才能防止 css 在全球范围内使用?抱歉我的英语不好:)
为避免您的问题,您可以创建一个全局 css 文件,例如 style.css
然后你 link 它到你的 index.html
因为@Chase DeAnda 建议您可以为每个页面建立名称空间。
你的 style.css 应该是这样的
.login .myClass {...}
.login .anotherClass {...}
.main .myClass {...}
.main .anotherClass {...}
我正在使用 ReactJs 构建一个包含 3 个路由的简单应用程序:
"/" <- index.js
"/login" <- login.js
"/register" <- register.js
要正确查看这些页面,我需要导入 CSS-files。 但是,如果我为“/login”路由导入 CSS-file,它也会加载到“/”路由中。
这是我的文件:
app.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import './App.css';
import Index from './pages/index';
import Login from './pages/login';
import './css/bootstrap.css';
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route exact path='/' component={Index} />
<Route exact path='/login' component={Login} />
</Switch>
</Router>
);
}
}
export default App;
index.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import logo from '../logo.svg';
import '../App.css';
class Index extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
<Link to={'/login'}>Login</Link>
</p>
</div>
);
}
}
export default Index;
和login.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import '../css/login.css';
import '../css/main.css';
import logo from '../img/s900x300.png';
import back from '../img/back.svg';
import view from '../img/view.svg';
export default class Login extends Component {
render() {
return (
<div>
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button className="back">
<a><img alt="" className="left" src={back}/></a>
</button>
<div className="background">
</div>
<div id="login" className="container login">
<img alt="" src={logo} />
<center><h5>‌</h5></center>
<input name="user" type="text" required placeholder="Benutzername oder Email"/>
<div className="password">
<input name="pw" required maxLength="64" type="password" placeholder="Passwort"/>
<button id="view_toggle">
<img alt="" src={view}/>
</button></div>
<form>
<button id="login" className="on">Login</button>
</form>
<center><b><a>back</a> | <Link to={'/register'}><a>Create account</a></Link></b></center>
</div>
<script src="/js/bootstrap.min.js"></script>
</div>
);
}
}
例如:在我的 login.css 中,想要我的 body 的背景图片。但这个背景也适用于“/”。我怎样才能防止 css 在全球范围内使用?抱歉我的英语不好:)
为避免您的问题,您可以创建一个全局 css 文件,例如 style.css
然后你 link 它到你的 index.html
因为@Chase DeAnda 建议您可以为每个页面建立名称空间。
你的 style.css 应该是这样的
.login .myClass {...}
.login .anotherClass {...}
.main .myClass {...}
.main .anotherClass {...}