[React log] 04-react use of styles (inline and external style sheets)

1: Create three new subcomponents in src, namely Header Content Footer

2: Write the code separately in it, it is recommended to use the rcc shortcut

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>
        )
    }
}

Write in Footer.js

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

3: Write a css Footer.css at the same level

.footer{
    color:green
}

4: Use our three subcomponents in the 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 considerations

6: Notes on css

After writing and running, you can see that the head is red font and the bottom is green font