[Reactログ] 04-スタイルのreact使用（インラインおよび外部スタイルシート）

1：srcに3つの新しいサブコンポーネント、つまりヘッダーコンテンツフッターを作成します

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：同じレベルでcssFooter.cssを記述します

.footer{
    color:green
}

4：インデックスで3つのサブコンポーネントを使用します

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：スタイルに関する考慮事項

6：cssに関する注記

書き込んで実行すると、頭が赤いフォントで、下が緑のフォントであることがわかります。