0
votes

Classe de rendu conditionnellement ou variable de style

J'ai besoin de pouvoir définir une couleur sur un div si une variable contenant une valeur de couleur hexagonale existe. Si la variable n'a pas de valeur, il doit utiliser une classe avec des styles de sauvegarde.

const backgroundColor = backgroundColorVal;

<div className={backgroundColor ? backgroundColor : classes.divWrapperClass}>

reactjs ternary

0 commentaires

4 Réponses :

0
votes

Si vous souhaitez régler la couleur d'arrière-plan, alors.

défini à l'aide de style inline-style dynamique fort> p> xxx pré>

Vous pouvez rétrécir ce qui précède Objet Syntaxe littérale si BackgroundColor code> est le même nom. P>

<div className={`${someCondition ? 'className if true' : 'className if false'}`} />

0 commentaires

0
votes

<div className={`${backgroundColor} ? ${backgroundColor} : ${classes.divWrapperClass}`}></div>
This would work

0 commentaires

0
votes

Vous voulez utiliser style si BackgroundColor code> est défini et non utilise la classe, voici une solution:

<div style={{backgroundColor}} className={!backgroundColor && classes.divWrapperClass}></div>

0 commentaires

0
votes

J'ai donc compris qu'il appliquait simplement le style et la classe en ligne sur le même div, car le style inline remplacera la classe si disponible:

<div style={{ backgroundColor: backgroundColor }} className={classes.divWrapper}></div>

0 commentaires