Comment modifier dynamiquement le style dans React : 1. Ajoutez une référence à l'élément dont le style doit être modifié, avec une syntaxe telle que "

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment modifier dynamiquement le style en réaction ?

Environ trois façons pour React de modifier dynamiquement les styles d'éléments

React pour modifier dynamiquement les styles d'éléments

Il existe deux manières courantes pour React de modifier dynamiquement les styles d'éléments : utiliser ref et modifier le style des éléments via le contrôle dynamique de changements d'état

1. Utilisez ref pour modifier dynamiquement le style

Ajoutez une référence sur l'élément qui doit être modifié

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

Copier après la connexion

Ajoutez React.createRef() dans le constructeur

this.manage = React.createRef()

Copier après la connexion

Utilisez-le dans le code logique

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

Copier après la connexion

Si le code Si cela ne peut pas être reconnu, vous devez changer le pointeur de this via let that = this

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

Copier après la connexion

2. Modifier le style de l'élément grâce au contrôle dynamique des changements d'état (deux manières)

Méthode 1

Définir dans le code logique Un indicateur affiche par défaut la valeur true ou false selon les conditions correspondantes, puis attribuez le nom de style correspondant à l'attribut className du DOM. Le style est écrit dans le style correspondant. Par exemple :

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

Copier après la connexion

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

Copier après la connexion

Méthode 2

Le principe de la méthode 2 est le même que celui de la méthode 1. Définissez l'affichage d'un bit d'indicateur dans le code logique pour qu'il soit vrai. par défaut, changez la valeur d'affichage en true ou false via les conditions correspondantes, puis modifiez le nom de style correspondant. Le nom de style est attribué à l'attribut className du DOM et le style est écrit dans le style correspondant. La différence est que le. le code logique n'est pas jugé dans le DOM, mais en js, comme suit :

3 Par Utiliser le code JS (opérateur ternaire) dans le DOM

pour réaliser l'affichage et le masquage de la conversion des différents DOM

. La méthode 3 ne change pas le style au sens strict, elle sert juste à changer l'affichage, masquer et afficher les composants correspondants

Pour résumer :

Si les styles modifiés sont de plus en plus complexes , utilisez 2

• Si les styles modifiés ne sont pas trop nombreux, utilisez 1 et 2
• S'il ne s'agit que d'un commutateur de deux composants (affiché avec Caché) Il est plus pratique d'utiliser 3
Problème de conflit de style de réaction

Il existe déjà une configuration sass dans l'échafaudage de réaction, il vous suffit donc d'installer le package de dépendances sass, et vous pouvez utiliser sass directement

Installez le package de dépendances sass

npm i sass -D

Copier après la connexion

- Remplacez index.css par index. scss

- Importez le fichier index.scss

Remarque : Si scss est utilisé, vous devez ajouter ~ lors de l'utilisation du chemin absolu de l'image dans scss~

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

Copier après la connexion

css -Style privatisation

css modules-Basic utilisation

Étapes

1. Changez le nom du fichier de style. De xx.scss -> xx.module.scss (convention dans l'échafaudage React, distinguée du CSS ordinaire)

2.

Importez le fichier de style dans le composant (notez la syntaxe)

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

Copier après la connexion

Accédez au nom du style dans l'objet via l'objet styles pour définir le style

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

Copier après la connexion

Le nom de la classe CSS est défini dans index.module.scss Nom de la classe.

Exemple

Définir le style index.module.css

.root {font-size: 100px;}

Utiliser les styles

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

Copier après la connexion

Principe

CS S Modules par automatiquement Nom de classe Compléter le nom de classe pour garantir l'unicité du nom de classe, évitant ainsi le problème de conflit de style

Notes sur le module CSS

Il est préférable d'utiliser la dénomination en casse chameau pour les noms de classe, car le nom de classe final générera un attribut de styles

cssModules- Conserver le nom de la classe

Format

Dans xxx.module.scss, si vous souhaitez conserver le nom de la classe, vous pouvez utiliser le format :

:global(.classname)

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

Copier après la connexion

remplacer le style des composants tiers

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

Copier après la connexion

modules CSS-Best Practice

- Le nœud racine de chaque composant utilise un nom de classe sous la forme de CSSModules (nom de classe de l'élément racine : root )

- Tous les autres nœuds enfants utilisent des noms de classe CSS ordinaires : utilisez le composant

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

Copier après la connexion

dans global

index.module.scss

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

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

          登录  
          登录  
      
            

    
  )
}

Copier après la connexion

Apprentissage recommandé : "Tutoriel vidéo React"