react如何添加css樣式

小編給大家分享一下react如何添加css樣式，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

添加方法：1、使用“style={{樣式代碼}}”在組件內部定義css樣式；2、先創建style樣式對象，然后在render函數的組件中使用“style={{對象}”語句引用；3、使用“import 'css文件路徑'”引入外部css文件。

相對于html中引用css的三種方法，react中也有三種方法，一一相對：

1、行內樣式：直接在組件內部定義

行內樣式是一種最基本的寫法，也就是我們最開始學HTML時寫的內聯樣式那樣，在項目中可能會比較少用到

在JSX中的用法：

class App extends React.Component {
  // ...
  render() {
    return (
      <div style={{ background: '#eee', width: '200px', height: '200px'}}>
        <p style= {{color:'red', fontSize:'40px'}}>Second Way!</p>
      </div>
    )
  }
}

需要注意的是，這里的css樣式名采用駝峰命名法：如font-size →fontSize，并且你需要將CSS屬性放在雙大括號之間。為什么要用兩個大括號？因為在JSX中渲染的JS表達式，它們必須被放在一對大括號里，{style}可以視為一個JS對象。所以第一對大括號正是將JS表達式放入JSX解析，里面的那對大括號則創建了一個style對象實例，所以在這里style是作為一個對象傳入組件

2、聲明樣式：

聲明樣式其實是行內樣式的一種改進寫法，在render函數外部創建style對象，然后傳遞給組件，讓css與標簽分離，但實際上樣式多了的話還是不太美觀

class App extends React.Component {
 
//...
 
 const style1={    
      background:'#eee',
      width:'200px',
      height:'200px'
    }
 
  const style2={    
      color:'red',
      fontSize:'40px'
    }
 
  render() {
    return (
      <div style={style1}>
        <p style= {style2}>Second Way!</p>
      </div>
    )
  }
}

注意這里實用的還是駝峰命名法，其次因為已經在外部聲明了style對象，所以在JSX中使用的時候只需要一個大括號{//..}

3、引入樣式：引入外部的css文件，外部的css文件就是普通的css，在組件js中的import語句后面使用如下語句。

引入樣式就是將CSS文件寫下外部，在引入使用，這種普通的引入樣式實際上會有一定的問題，我們先看用法，再分析問題

用法：

css 文件

.person{
    width: 60%;
    margin:16px auto;
    border: 1px solid #eee;
    box-shadow: 0 2px 3px #ccc;
    padding:16px;
    text-align: center;
}

js文件

import React from 'react';
import './Person.css';
class App extends React.Component {
 
  //....  
 
  render() {
 
    return (
      <div className='person'>
        <p>person:Hello world</p>
      </div> 
    )
  }
}
 
export default App;

結果展示：

問題：

因為CSS的規則都是全局的，任何一個組件的樣式規則，都對整個頁面有效，這可能會導致大量的沖突。也就是說如果我有兩個css文件，它們的中的一些樣式名是一樣的，那么就會被覆蓋，簡單的解決辦法就是將樣式的命名變得復雜且不重復，但這樣樣式多了也很難避免重復，且命名也不會太好看。

以上是“react如何添加css樣式”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！