Ajout d'attribut de style sur l'élément sur mesure React ne semble pas ramasser

Question

je code comme suit (en utilisant des modules CSS):

return (
    <div> 
    <LandingPage className={styles.hidden} /> 
    </div> 
); 

Ce qui ne fonctionne pas (c.-à ne pas appliquer le CSS à l'élément). Cependant, renvoyer

<div> 
    <div className={styles.hidden}> 
     <LandingPage /> 
    </div> 
    </div> 

Fonctionne très bien. Pourquoi l'application d'un className sur un élément personnalisé entraîne-t-elle l'ignorance de la classe?

Answer 1

Ici className ne sera pas appliqué directement sur le composant LandingPage, il est essentiellement une valeur props que vous passez du composant parent au composant de l'enfant, vous devez appliquer cette classe à l'intérieur LandingPage composant.

Comme ceci:

<LandingPage customClassName={styles.hidden} /> 

intérieur LandingPage:

render(){ 
    console.log('class name', this.props.customClassName); 
    return(
     <div className={this.props.customClassName}> 
      {/* other elements */} 
     </div> 
    ) 
} 

Rappelez-vous toujours accessoires est un objet, quelles que soient les données que vous passerez des parents deviendra une partie des valeurs des accessoires uniquement, vous besoin d'utiliser ces données quelque part dans le composant enfant.

Vérifiez le console, il affichera le nom de classe que vous passez du parent.