React样式

• 基于class，但是react必须用className代替class
• 基于内联样式style，style = { } 遵循“驼峰命名法”
• lineHeight:"20px" 必须带单位
• style = { backgroundColor:"red",fontSize:20 } 不带单位
  
  
  react样式代码

// cssDemo.js文件

import React from "react"
import { outerStyle } from "../utils"

const commonStyle = {
    borderStyle:{
        border:'3px solid #555',
        borderRadius:10,
        boxShadow:"0 10px 10px #999"
    }
}

export class CssDemo extends React.Component{
    render(){
        return (
            <div style={ outerStyle.all }>
                <h2 className="one"> CssDemo - React - 书写样式 </h2>
                <h2 style={ { fontSize:20,color:"red",fontWeight:600,lineHeight:'50px' } }> GoodGoodStudy </h2>
                <h2 style={ commonStyle.borderStyle }> DayDayUp </h2>
                <h2 style={ { ...commonStyle.borderStyle,...outerStyle.all } }> 好好学习，天天向上 </h2>                
                <h2 style={ this.mycss.dark }> DingdingZ </h2>
            </div>
        )
    }
}

CssDemo.prototype.mycss = {
    light:{
        backgroundColor:"#ff0"
    },
    dark:{
        backgroundColor:"#B5B5B5"
    }
}

// index.js文件

export const outerStyle = {
    all:{
        width:"100%",
        padding:0,
        margin:0,
        borderBox:"box-sizing"
    }
}