首頁 >web前端 >js教程 >react中如何引入css樣式

react中如何引入css樣式

王林
王林原創
2020-11-27 09:44:163461瀏覽

react中引入css樣式的方法:首先在render函數中宣告樣式,如【render() {let mystyle = {}}】;然後引用樣式即可,如【return(afcd361c256f72ae3012842bfd45cdff16b28748ea4df4d9c2150843fecfba68);】。

react中如何引入css樣式

本文環境:windows10、react16&&css3版本,Dell G3電腦。

(學習影片分享:react影片教學

react有三種方法可以引入css樣式:

1、行內樣式:直接在元件內部定義

<div style={{width:&#39;20px&#39;,height:&#39;30px&#39;}}>
    First Way!
</div>

2、聲明樣式:在render函數中先聲明,再引用

render() {
    let mystyle = {
         width:&#39;20px&#39;,
         height:&#39;30px&#39;
    }

    return(
        <div style={mystyle}>
            Second Way!
        </div>
    );
}

3、引入樣式:引入外部的css文件,外部的css文件就是普通的css,在元件js中的import語句後面使用如下語句。

requre(&#39;./mystyle.css&#39;);

相關推薦:js教學

#

以上是react中如何引入css樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn