React組件CSS樣式

第一種、外部引入。

　　　　首先，尋找CDN：https://www.bootcdn.cn/

　　　　然后找到你想要的CDN 如bootstrap等等，點擊復制標簽。

然后打開自己項目目錄的public-index.html文件。

 

把剛才的CDN復制進去就OK了，然后就可以在標簽中書寫相應類名就可以了。例如：<div className=“樣式名”><div>.

 當然也可以在組件內引入自己的樣式文件。

import './style.css';

然后用className=“樣式名”引用就可以了。

二、內聯樣式。

　　

 需要注意的是樣式名稱的書寫采用駝峰式命名。例如：font-size要改成fontSize這樣的。

render(){
    let color = {
            backgroundColor: "#5D90AB",
            borderRadius: "5px",
            display: "inline-block",
            width: "140px",
            height: "50px",
            color: "#fff",
            border: '1px #666 solid',
        };
    return(
    
           <div style={color}>哈哈</div>

    )
}

　　也可以這樣寫。

<div style={{ margin: "0 auto", width: "800px" }}>哈哈</div>

　　還可以這樣寫。

需要注意的是，這里的style樣式是寫在組件內部render方法內的 最外層需要有一個div包裹，並且，style標簽內是一對花括號{ }花括號內是一對``（就是數字鍵1 tab鍵上邊那一個）然后才是樣式。

<div>
　　　　<div className="color"></div>
        <style>
        {
         `
            .color {
                    color:#404040;
                    text-align: center
                    }
         `
         }
        </style>
　　</div>