How to dynamically modify style in react

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的内容</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就不会修改掉类名.a了。等价于写在 index.css中 */
:global(.a) {   }
 
/* 这样css modules就不会修改掉类名.a了, 但是 .aa还是会被修改 */
.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 包裹其他子节点的类名。此时，这些类名就不会被处理，在 JSX 中使用时，就可以用字符串形式的类名
  // 如果不加 :global ，所有类名就必须添加 styles.title 才可以
  :global {
    .title {
      .text {
      }
      span {
      }
    }
    .login-form { ... }
  }
}

component usage

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

      {/* （2） 所有子节点，都使用普通的 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!