How to dynamically modify style in react: 1. Add ref to the element whose style needs to be modified, with syntax such as "

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to dynamically modify style in react?

About three ways for React to dynamically modify element styles

React to dynamically modify element styles

Common ways for React to dynamically modify element styles There are two types: modifying the style of the element with the help of ref and dynamically controlling the change of state

1. Using ref to dynamically modify the style

Add ref

## on the element that needs to be modified. #

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

Add React.createRef() in constructor

this.manage = React.createRef()

Use in logic code

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

if code If this cannot be recognized, you need to change the pointer of this through let that = this

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

2. Modify the style of the element through dynamic control of state changes (two methods)

Method 1

Set a flag display in the logic code to be true by default, change the value of display to true or false through the corresponding conditions, and then assign the corresponding style name to the DOM The className attribute, the style is written in the corresponding style

For example:

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

Method 2

The implementation principle of method 2 is the same as method 1. Set a flag display in the logic code to be true by default, change the value of display to true or false according to the corresponding conditions, and then assign the corresponding style name to the DOM. className attribute, the style is written in the corresponding style. The difference is that the logic code is not judged in the DOM, but in js, as follows:

3. By using JS code (ternary operator) in DOM

to realize the display and hiding conversion of different DOM

way Third, it is not changing the style in the strict sense, it is just used to change the display, hiding and display of the corresponding components.

Summary:

If the changed styles are more complex, use 2
If the changed styles are not too many, use 1 and 2
If it is just a switch between two components (display and Hidden) It is most convenient to use 3

React style conflict problem

There is already a sass configuration in the react scaffolding, so you only need to install the sass dependency package and you can use sass directly

Install the sass dependency package

npm i sass -D

- Change index.css to index.scss

- Import index. scss file

Note: If scss is used, you need to add ~ when using the absolute path of the image in scss

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

css-style privatization

css modules-Basic usage

Steps

1. Change the style file name. From xx.scss -> xx.module.scss (convention in React scaffolding, distinguished from ordinary CSS)

2. Introduce and use.

Import the style file into the component (note the syntax)

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

Access the style name in the object through the styles object to set the style

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

css class name is the class name defined in index.module.scss.

Example

Define style index.module.css

.root {font-size: 100px;}

Use style

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

Principle

CSS Modules ensures the uniqueness of the class name by automatically supplementing the class name with the CSS class name , thereby avoiding the problem of style conflicts

Notes on css module

It is best to use camel case naming for class names, because the final class name will generate an attribute of styles

cssModules-Maintain class name

Format

In xxx.module.scss, if you want to maintain the class name, you can use the format:

:global(.class name)

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

Override the style of third-party components

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

css modules-best practices

- The root node of each component uses a class name in the form of CSSModules (class name of the root element: root )

- All other child nodes use ordinary CSS class names: 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 { ... }
  }
}

component usage

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

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

          登錄  
          登錄  
      
            

    
  )
}

Recommended learning: "react video tutorial"

The above is the detailed content of How to dynamically modify style in react. For more information, please follow other related articles on the PHP Chinese website!