React中样式设置和CSS引入

1.内联式（行内样式）

直接在标签内部声明样式

< div style={{fontSize:‘30px’,lineHeight: ‘50px’,marginTop: ‘90px’}}>Home< /div>

style样式要放在双花括号{{ }}之间，原连字符形式更改为单驼峰式写法

margin-top → marginTop

2.嵌入式（内部样式）

通过标签名、class或id等方法与标签联系起来设置样式

render(){
        let myStyle= {
            color:'red'
        }
        return(
            <div style={myStyle}>Home</div>
        )
    }

引入的样式名称放在 { } 之间，声明一个myStyle对象，其内容为样式内容

3.外联式（外部样式）

通过引入外部文件来设置样式

import '../styles/style.css'


 <div className="myStyle">Home</div>

注意在react中，原生html使用class,在组件中要使用className，引入css文件即可