0
votes

Pseudo-classes CSS avec des styles en ligne dans React.js

Exemple de texte maintenant avec l'arrière-plan sera de couleur rouge. Mais je veux l'ajout de la classe: après avoir la bordure: couleur. Cela devrait prendre de const. Je ne sais pas comment faire ça xxx


1 commentaires

Exigence I: J'ai besoin de passer la couleur du fichier de configuration, de l'exemple de couleur: rouge, 1. Dans l'heure de la division, je prends la valeur de configuration Couleur: rouge à l'aide de cela.props.color.mais j'ai besoin d'un nom d'absence de classe: après (c'est un pseudo élément) Aussi (j'avais besoin d'accessoires).


4 Réponses :


0
votes

Vous cherchez ceci :? ( https://developer.mozilla.org/en-us/docs / Web / CSS / Utilisation_css_custom_properties )

p>

<div class="rightElement" > Example </div>


0 commentaires

0
votes

Voir CSS pseudo éléments dans React . Il semble qu'une meilleure pratique consiste à utiliser des éléments distincts dans la réaction au lieu de pseudo-éléments. Pourriez-vous simplement faire cela à la place?

<div className='rightElement' style={{backgroundColor: color}}>
  Example
  <div style={{borderTopColor: color}}></div>
</div>


1 commentaires

En outre, FYI Votre code avait une corde bouclée manquante sur l'attribut de style



0
votes

Il n'est pas possible d'accéder directement à l'élément pseudo.

Cependant, vous pouvez modifier leur style indirectement en ajoutant dans un nouvel élément de style contenant de nouvelles règles. P>

Essayez comme ça pour ajouter après CSS . p>

p>

<div id='rightElement' style="background-color: green" >Example </div>


3 commentaires

Merci Syed ... je vais essayer comme ça.


Super Syed, c'est bien. Vous allez-nous ajouter celui-ci en code de réact? parce que nous sommes encore une itération le document.AppendCendChild.is de toute façon à changer selon le code de réacteur


SYED .. Toute solution possible pour réact.js.Parce que le code var stylemem = document.head.appendchild (document.careeeelement ("style")); styleelem.innerhtml = "#RightElement: Après {Border-top: 1px Solid" + couleur + ";}"; ressemble à JavaScript .Can vous le faites réagir en fonction de cela ???



0
votes

dans HTML & CSS

p>

render () {
		const color = "red";
		return(
			<div style={{width: '500px', margin: '0 auto', marginTop: '100px'}}>
				<div className='rightElement' style={{backgroundColor: color}} >Example </div>
				<div style={{borderTop: `10px solid ${color}`}}></div>
			</div>
		)
	}


0 commentaires