react動(dòng)態(tài)修改style的方法：1、在需要修改樣式的元素上新增ref，其語法如「

本教學(xué)操作環(huán)境：Windows10系統(tǒng)、react18.0.0版、Dell G3電腦。

react 怎麼動(dòng)態(tài)修改style？

關(guān)於React動(dòng)態(tài)修改元素樣式的三種方式

React動(dòng)態(tài)修改元素樣式

React動(dòng)態(tài)修改元素樣式常用的方式有兩種：借助ref和透過動(dòng)態(tài)控制狀態(tài)的變化修改元素的樣式

1.借助ref動(dòng)態(tài)修改樣式

在需要修改樣式的元素上新增ref

#

<div className=&#39;scroll-title clear-fix&#39; ref={ this.manage }>

在constructor中新增React.createRef()

this.manage = React.createRef()

在邏輯程式碼中使用

this.manage.current.style.display = 'block'

#如果程式碼中辨識(shí)不出this的話需要透過let that = this 改變this的指向

that.manage.current.style.display = 'block'

2.透過動(dòng)態(tài)控制狀態(tài)的變化修改元素的樣式（兩種方式）

方式一

邏輯程式碼中設(shè)定一個(gè)標(biāo)誌位display預(yù)設(shè)為true，透過對(duì)應(yīng)的條件改變display的值為true或false，進(jìn)而將對(duì)應(yīng)的樣式名稱賦值給DOM的className屬性，樣式寫在對(duì)應(yīng)的style當(dāng)中

例如：

 constructor() {
        super()
        this.state = {
            display: true
        }
    }   
    componentDidMount() {
        window.onscroll = function(event) {
                if (divTop < -12) {
                     that.setState({
                         display: false
                     })
                    that.manage.current.style.display = &#39;block&#39;
                } else {
                     that.setState({
                         display: true
                     })
                }
        }
    }

<div className={this.state.display ? &#39;none&#39; : &#39;scroll-title }>

方式二

#方式二和方式一實(shí)現(xiàn)的原理是一樣的，邏輯程式碼中設(shè)定一個(gè)標(biāo)誌位display預(yù)設(shè)為true，透過對(duì)應(yīng)的條件改變display的值為true或false，進(jìn)而將對(duì)應(yīng)的樣式名稱賦值為DOM的className屬性，樣式寫在對(duì)應(yīng)的style當(dāng)中，不同之處在於邏輯程式碼的判斷不是在DOM中，而是在js中判斷的，如??下：

3.透過在DOM中使用JS程式碼（三元運(yùn)算子）

#實(shí)現(xiàn)不同DOM的展示與隱藏轉(zhuǎn)換

方式三不是嚴(yán)格意義上的改變樣式，只是用來改變顯示與隱藏及展示對(duì)應(yīng)的元件的

小結(jié)一下：

• #如果改變的樣式比較多而雜使用2
• 如果改變的樣式不太多使用1和2
• 如果只是兩個(gè)元件的切換（顯示與隱藏）使用3最方便

React樣式衝突問題

在react腳手架中已經(jīng)有了sass的配置，因此只需要安裝sass的依賴包，就可以直接使用sass了

安裝sass依賴套件

npm i sass -D

- 把index.css改成index.scss

- 導(dǎo)入index. scss檔案

注意：如果使用了scss，scss中使用圖片的絕對(duì)路徑的時(shí)候需要加上~?

background-image: url(~assets/login.png);

css-樣式私有化

#css modules-基本上使用

步驟

1.改變樣式檔名。從 xx.scss -> xx.module.scss （React腳手架中的約定，與普通 CSS 作區(qū)分）

#2.引入使用。

• 元件中匯入該樣式檔案（注意語法）

import styles from './index.module.scss'

• 透過styles 物件存取物件中的樣式名稱來設(shè)定樣式

<div className={styles.css類名}></div>

css類別名稱是index.module.scss中定義的類別名稱。

範(fàn)例

定義樣式index.module.css?

.root {font-size: 100px;}

#使用樣式

import styles from './index.module.css'
<div className={styles.root}>div的內(nèi)容</div>

原理

#CSS Modules 透過自動(dòng)給予CSS 類別名稱補(bǔ)足類別名，確保類別名稱的唯一性，從而避免樣式衝突的問題??

css module的注意點(diǎn)?

類別名稱最好使用駝峰命名，因?yàn)樽罱K類別名稱會(huì)產(chǎn)生styles的一個(gè)屬性

cssModules-維持類別名稱?

格式

在xxx.module.scss中，如果希望維持類別名，可以使用格式：

:global(.類別名稱)

/*這樣css modules就不會(huì)修改掉類名.a了。等價(jià)于寫在 index.css中 */
:global(.a) {   }
 
/* 這樣css modules就不會(huì)修改掉類名.a了, 但是 .aa還是會(huì)被修改 */
.aa :golbal(.a) { }

覆蓋第三方元件的樣式

:global(.ant-btn) {
  color: red !important;
}

css modules-最佳實(shí)務(wù)

#- 每個(gè)元件的根節(jié)點(diǎn)使用CSSModules 形式的類別名稱（ 根元素的類別名稱： root ）

- 其他所有的子節(jié)點(diǎn)，都使用普通的CSS 類別名稱:global

index.module.scss中

// index.module.scss
.root {
  display: 'block';
  position: 'absolute';
  // 此處，使用 global 包裹其他子節(jié)點(diǎn)的類名。此時(shí)，這些類名就不會(huì)被處理，在 JSX 中使用時(shí)，就可以用字符串形式的類名
  // 如果不加 :global ，所有類名就必須添加 styles.title 才可以
  :global {
    .title {
      .text {
      }
      span {
      }
    }
    .login-form { ... }
  }
}

元件使用

import styles from './index.module.scss'
const 組件 = () => {
  return (
    {/* （1） 根節(jié)點(diǎn)使用 CSSModules 形式的類名（ 根元素的類名： `root` ）*/}
      

      {/* （2） 所有子節(jié)點(diǎn)，都使用普通的 CSS 類名*/}
        

          登錄  
          登錄  
      
            

    
  )
}

推薦學(xué)習(xí)：《react影片教學(xué)》

以上是react 怎麼動(dòng)態(tài)修改style的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！