react 怎麼動態修改style

react動態修改style的方法：1、在需要修改樣式的元素上新增ref，其語法如「

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react 怎麼動態修改style？

關於React動態修改元素樣式的三種方式

React動態修改元素樣式

React動態修改元素樣式常用的方式有兩種：借助ref和透過動態控制狀態的變化修改元素的樣式

1.借助ref動態修改樣式

在需要修改樣式的元素上新增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'

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

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

2.透過動態控制狀態的變化修改元素的樣式（兩種方式）

方式一

邏輯程式碼中設定一個標誌位display預設為true，透過對應的條件改變display的值為true或false，進而將對應的樣式名稱賦值給DOM的className屬性，樣式寫在對應的style當中

例如：

 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 }>

方式二

#方式二和方式一實現的原理是一樣的，邏輯程式碼中設定一個標誌位display預設為true，透過對應的條件改變display的值為true或false，進而將對應的樣式名稱賦值為DOM的className屬性，樣式寫在對應的style當中，不同之處在於邏輯程式碼的判斷不是在DOM中，而是在js中判斷的，如​​下：

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

#實現不同DOM的展示與隱藏轉換

方式三不是嚴格意義上的改變樣式，只是用來改變顯示與隱藏及展示對應的元件的

小結一下：

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

React樣式衝突問題

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

安裝sass依賴套件

npm i sass -D

- 把index.css改成index.scss

- 導入index. scss檔案

注意：如果使用了scss，scss中使用圖片的絕對路徑的時候需要加上~ 

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

css-樣式私有化

#css modules-基本上使用

步驟

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

#2.引入使用。

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

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

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

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

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

範例

定義樣式index.module.css 

.root {font-size: 100px;}

#使用樣式

import styles from './index.module.css'
<div className={styles.root}>div的内容</div>

原理

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

css module的注意點 

類別名稱最好使用駝峰命名，因為最終類別名稱會產生styles的一個屬性

cssModules-維持類別名稱 

格式

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

:global(.類別名稱)

/*这样css modules就不会修改掉类名.a了。等价于写在 index.css中 */
:global(.a) {   }
 
/* 这样css modules就不会修改掉类名.a了, 但是 .aa还是会被修改 */
.aa :golbal(.a) { }

覆蓋第三方元件的樣式

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

css modules-最佳實務

#- 每個元件的根節點使用CSSModules 形式的類別名稱（ 根元素的類別名稱： root ）

- 其他所有的子節點，都使用普通的CSS 類別名稱:global

index.module.scss中

// index.module.scss
.root {
  display: 'block';
  position: 'absolute';
  // 此处，使用 global 包裹其他子节点的类名。此时，这些类名就不会被处理，在 JSX 中使用时，就可以用字符串形式的类名
  // 如果不加 :global ，所有类名就必须添加 styles.title 才可以
  :global {
    .title {
      .text {
      }
      span {
      }
    }
    .login-form { ... }
  }
}

元件使用

import styles from './index.module.scss'
const 组件 = () => {
  return (
    {/* （1） 根节点使用 CSSModules 形式的类名（ 根元素的类名： `root` ）*/}
      

      {/* （2） 所有子节点，都使用普通的 CSS 类名*/}
        

          登录  
          登录  
      
            

    
  )
}

推薦學習：《react影片教學》

以上是react 怎麼動態修改style的詳細內容。更多資訊請關注PHP中文網其他相關文章！