04react中样式的使用(内联和外部样式表)

1:在src中新建了三个子组件分别为Header Content  Footer

2:在里面分别写入代码 建议用rcc快捷方式

Header.js中

import React, { Component } from 'react'
var  HeaderStyle = {
    color:"red"
}

export default class Header extends Component {
    render() {
        return (
            <div style={HeaderStyle}>
                我是头部
            </div>
        )
    }
}

Content.js中

import React, { Component } from 'react'

export default class Content extends Component {
    render() {
        return (
            <div>
                我是内容
            </div>
        )
    }
}

 

在Footer.js中写入

import React, { Component } from 'react'
import "./Footer.css";
export default class Footer extends Component {
    render() {
        return (
            <div className="footer">
                我是底部
            </div>
        )
    }
}

3:在同级写一个css Footer.css

.footer{
    color:green
}

4:在index中使用我们的三个子组件

import  React,{Component} from "react";
import ReactDom from "react-dom";
import Header from "./Header";
import  Content  from  "./Content";
import Footer from "./Footer";
class  App  extends  Component{
    render(){
        return (
            <div>
                <Header></Header>
                <Content></Content>
                <Footer></Footer>
            </div>
        )
    }
}
ReactDom.render(<App content="React"></App>,document.getElementById("root"))

 

5:style注意事项

6:css的注意事项

写完运行  就可以看到头部是红色字体  底部是绿色字体