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"即可;