文章/答案/技术大牛

发布

社区首页 >问答首页 >React.js路由器不同的背景图像

问React.js路由器不同的背景图像
EN

Stack Overflow用户

提问于 2018-05-13 19:03:34

回答 2查看 4.5K关注 0票数 0

我想要应用特定组件的背景图像。

我使用了react-router-dom，我的代码如下。

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Login from './components/Login';
import Home from './components/Home';

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Route exact path="/" component={Login} />
          <Route path="/home" component={Home} />
        </div>
      </Router>
    );
  }
}

export default App;

import React, { Component } from 'react';
import './Login.css';

class Login extends Component {
    render() {
        return (
            <div>
               Login
            </div>
        );
    }
}

export default Login;

html {
    background-color: red;
}

Home.js

import React, { Component } from 'react';
import './Home.css';

class Home extends Component {
    render() {
        return (
            <div>
                Home
            </div>
        );
    }
}

export default Home;

Home.css

html {
    background-color: blue;
}

我将Login的背景色设置为红色，将Home设置为蓝色。

但不仅是Login.js，Home.js的背景颜色也是蓝色的。

如何为每个组件设置不同的背景色？

react-router-dom

reactjs

回答 2

Stack Overflow用户

发布于 2018-05-13 19:08:40

将样式应用于类

将类分配给Login.js中最外层的div

class Login extends Component {
    render() {
        return (
            <div className="login">
               Login
            </div>
        );
    }
}

export default Login;

现在将样式应用于类

.home{
    background-color:blue;
    }

.login{
  background-color:red;
  }

如果你想为整个页面应用背景图片，试试这个css。

.home {
    background: url("image.jpg");
    background-size: cover;
    background-repeat: no-repeat;
 }

票数 3

Stack Overflow用户

发布于 2018-05-13 19:07:46

将css更改为：

body {
    background-color: red !important;
}

背景颜色属性设置为body标记，而不是html标记。!important将确保将此样式应用于您可能遇到的任何其他冲突。

-编辑--

若要将背景色应用于各个组件，应向每个父div添加一个类，并直接设置该类的样式，如下所示：

注意:高度已添加到样式，以确保100%垂直填充的浏览器，根据操作员的要求。在其他情况下不需要。

Login.js

import React, { Component } from 'react';
import './Login.css';

class Login extends Component {
    render() {
        return (
            <div className="scene_login">
               Login
            </div>
        );
    }
}

export default Login;

Login.css

body, html {
     height: 100%;
}

.scene_login {
    height: 100%;
    background-color: red;
}

Home.js

import React, { Component } from 'react';
import './Home.css';

class Home extends Component {
    render() {
        return (
            <div className="scene__home">
                Home
            </div>
        );
    }
}

export default Home;

Home.css

body, html {
    height: 100%;
}

.scene__home {
    height: 100%;
    background-color: blue;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50315429

复制

相似问题

问React.js路由器不同的背景图像
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React.js路由器不同的背景图像EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React.js路由器不同的背景图像
EN