一 . 支持JS 编写CSS

给Header.jsHeader.js增加样式

驼峰命名法

js 写 css 样式使用原始属性需要双引号括起来。

注意：const 定义要放在 render 里面return 函数之前，否则会报错。

import React from 'react';import ReactDOM from 'react-dom';//export 暴露export default class ComponentHeader extends React.Component{  render(){   //解析类的输出    const styleComponentHeader = {      header: {        backgroundColor: "#333",        color: "#fff",        "padding-top": "15px",  //css原生 不推进        paddingBottom: "15px"      },      //定义其他样式    };    return (      
    
        
     
这里是头部
      
    
    )  }}

二.引用css文件

1. 创建 style.css文件

.smallFountSize h1{  font-size: 12px;}

2.在 index.html 中引用

  
    
    
     123dfdf
    

3.在页面中使用类样式

import React from 'react';import ReactDOM from 'react-dom';//export 暴露export default class ComponentHeader extends React.Component{  render(){   //解析类的输出    const styleComponentHeader = {      header: {        backgroundColor: "#333",        color: "#fff",        "padding-top": "15px",  //css原生 不推进        paddingBottom: "15px"      },      //定义其他样式    };    return (      
    
         
     
这里是头部
      
    
    )  }}

三. 內联样式用表达式

点击 header  改变。

1.存储样式，state  --> 创建构造函数，存储 true false 值，点击改变，利用值来控制样式

2. "padding-top": {this.state.miniHeader}?"3px" : "15px", 

3. state 与 css  融合，引起样式及时变化

import React from 'react';import ReactDOM from 'react-dom';//export 暴露export default class ComponentHeader extends React.Component{  constructor(){    super();    this.state = {      miniHeader: false,    }  }  switchHeader(){    this.setState({      miniHeader: !this.state.miniHeader,    })  }  render(){   //解析类的输出    const styleComponentHeader = {      header: {        backgroundColor: "#333",        color: "#fff",        "padding-top": (this.state.miniHeader) ? "3px" : "15px",  //css原生 不推荐        paddingBottom: (this.state.miniHeader)? "3px" : "15px",      },      //定义其他样式    };    return (      
    
        
     
这里是头部
      
    
    )  }}