react中样式的使用（内联和外部样式表）

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

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中代码如下

import React, { Component } from 'react'
 
export default class Content extends Component {
    render() {
        return (
            <div>
                我是内容
            </div>
        )
    }
}

Footer中代码如下

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

3：在同级写一个Footer.css

在Footer.css中写入代码如下

.foo{
    color: blueviolet;
}

4：在index.js中使用三个组件

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的注意事项

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