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

1   按照上次文章在src中新建了三个子组件分别为header,content,footer

其中content,和footer的内容如下,header中的内容不变

content.js

import React, { Component } from 'react'

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

footer.js

import React, { Component } from 'react'

export default class content extends Component {

  render() {

    return (

      <div>

        我是尾部

      </div>

    )

  }

}

将上述两个组件导入到index.js组件中

import React,{ Component } from "react";
import ReactDom from "react-dom";
import Myheader from "./header";
import Mycontent from "./content";
import Myfooter from "./footer";

class  App extends Component {
  render() {
    return (
      <div>
        <Myheader></Myheader>
        <Mycontent></Mycontent>
        <Myfooter></Myfooter>
      </div>
    )
  }
}
ReactDom.render(<App></App>,document.getElementById("root"))

保存 运行npm run start结果如下

2下面我们选择footer一个添加内联css样式

footer.js中的代码如下

import React, { Component } from 'react'


var FooterStyle = {
  color:"red"
}

export default class footer extends Component {
  render() {
    return (
      <div style={FooterStyle}>
        我是尾部
      </div>
    )
  }
}

保存 运行npm run start结果如下

 3下面我们选择header添加外部导入css样式

 

 保存 运行npm run start结果如下