[React log] 04-reaccionar uso de estilos (hojas de estilo en línea y externas)

1: Cree tres nuevos subcomponentes en src, a saber, encabezado, contenido, pie de página

2: Escriba el código por separado en él, se recomienda utilizar el acceso directo 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>
        )
    }
}

Escribir en Footer.js

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

3: escriba un css Footer.css en el mismo nivel

.footer{
    color:green
}

4: Utilice nuestros tres subcomponentes en el índice

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: consideraciones de estilo

6: Notas sobre CSS

Después de escribir y ejecutar, puede ver que la cabeza es una fuente roja y la parte inferior es una fuente verde.