react-tips3: 设置样式 设置组件的样式

react 页面样式的设置，和普通的页面样式设置没有太大区别；

首先我们创建一个Index组件，目录如下：

                                                               

创建的这个Index组件只有一个index.js 文件和 index.css 文件；

 

我们先不管这两个文件中的内容，我们先把这个组件挂载到页面中；

首先找到 src 目录下的index.js 文件，写入如下文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Index from './Pages/Index/index';  // (1)引入我们刚才创建的 index 组件
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<Index />, document.getElementById('root')); // (2)挂载刚才引入的组件 index  

serviceWorker.unregister();

上面在 src/index.js 文件中主要有两步，先引入创建的index 组件，再挂载到 root 上即可；

 

我们上面再页面中挂载了页面，但是这个组件我们没有增加任何的内容，下面我们给这个组件增加页面和样式；

我们先写页面，打开Pages/Index/index.js 文件：

import React ,{Component} from 'react';
import './index.css'; // 引入当前组件的样式文件

export default class Index extends React.Component {
    render(){
        return( // 此处写页面
            <div className="style-index">
                测试组件的样式
            </div>
        )
    }
}

 

我们在上面的组件中增加了一个简单的div，起了个类名 style-index ，然后我们设置这个div 的样式：

打开Pages/Index/index.css 文件：

.style-index {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f9f9f9;
}

 

这样，一个页面的基本内容就完成了，在react 中 class="style-index" 换成 className="style-index"即可；