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

怼烎@ 2022-03-18 03:40 314阅读 0赞

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

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

![20190219094119755.png][]

创建的这个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"即可；

[20190219094119755.png]: /images/20220318/aafec39c88124e438fbec43d33fdd005.png