小編給大家分享一下react如何添加css樣式，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
添加方法：1、使用“style={{樣式代碼}}”在組件內(nèi)部定義css樣式；2、先創(chuàng)建style樣式對象，然后在render函數(shù)的組件中使用“style={{對象}”語句引用；3、使用“import 'css文件路徑'”引入外部css文件。
相對于html中引用css的三種方法，react中也有三種方法，一一相對：
1、行內(nèi)樣式：直接在組件內(nèi)部定義
行內(nèi)樣式是一種最基本的寫法，也就是我們最開始學HTML時寫的內(nèi)聯(lián)樣式那樣，在項目中可能會比較少用到
在JSX中的用法：
重慶分公司
重慶分公司
class App extends React.Component {
// ...
render() {
return (
Second Way!
需要注意的是，這里的css樣式名采用駝峰命名法：如font-size →fontSize，并且你需要將CSS屬性放在雙大括號之間。為什么要用兩個大括號？因為在JSX中渲染的JS表達式，它們必須被放在一對大括號里，{style}可以視為一個JS對象。所以第一對大括號正是將JS表達式放入JSX解析，里面的那對大括號則創(chuàng)建了一個style對象實例，所以在這里style是作為一個對象傳入組件
2、聲明樣式：
聲明樣式其實是行內(nèi)樣式的一種改進寫法，在render函數(shù)外部創(chuàng)建style對象，然后傳遞給組件，讓css與標簽分離，但實際上樣式多了的話還是不太美觀
class App extends React.Component {
//...
const style1={
background:'#eee',
width:'200px',
height:'200px'
}
const style2={
color:'red',
fontSize:'40px'
}
render() {
return (
Second Way!
注意這里實用的還是駝峰命名法，其次因為已經(jīng)在外部聲明了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 (
person:Hello world
結果展示：
問題：
因為CSS的規(guī)則都是全局的，任何一個組件的樣式規(guī)則，都對整個頁面有效，這可能會導致大量的沖突。也就是說如果我有兩個css文件，它們的中的一些樣式名是一樣的，那么就會被覆蓋，簡單的解決辦法就是將樣式的命名變得復雜且不重復，但這樣樣式多了也很難避免重復，且命名也不會太好看。
以上是“react如何添加css樣式”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
