Comment définir la couleur du texte en React

par

Définir la couleur du texte en React #

Utilisez les styles en ligne pour définir la couleur du texte d’un élément dans React.js, par exemple.
<span style={{color: 'green'}}>colorful</span>. La couleur du texte sera uniquement
appliquée à l’élément auquel elle a été ajoutée et à ses enfants.

const App = () => {
  return (
    <div>
      <p style={{fontSize: '2rem'}}>
        Some{' '}
        <span style={{color: 'white', backgroundColor: 'lime'}}>colorful</span>{' '}
        text
      </p>
    </div>
  );
};

export default App;

react style text color

Nous avons utilisé les styles en ligne pour
changer la couleur du texte d’un élément.

Notez que les propriétés de plusieurs mots sont mises en majuscule lorsqu’elles sont spécifiées comme des styles en ligne.

Le premier ensemble d’accolades dans le style en ligne marque le début d’une expression et le second ensemble d’accolades est l’objet contenant les styles.
expression, et le deuxième ensemble d’accolades est l’objet contenant les styles et les valeurs
et les valeurs.

La couleur de texte modifiée ne sera appliquée qu’à l’objet span élément.

Si vous avez besoin de faire cela souvent, vous pouvez extraire l’élément span dans un composant
qui assure le rendu de ses enfants.

function ColorfulText({children}) {
  return <span style={{color: 'green'}}>{children}</span>;
}

const App = () => {
  return (
    <div>
      <p style={{fontSize: '2rem'}}>
        Some <ColorfulText>colorful</ColorfulText> text
      </p>
    </div>
  );
};

export default App;

Tout ce que nous passons entre les balises d’ouverture et de fermeture de l’élément ColorfulText
se verra appliquer la couleur de texte spécifique.

Une autre solution consiste à définir une classe dans un fichier global de type css global.

.red-text {
  color: red;
}

Et voici comment importer le fichier App.css et utiliser la méthode red-text classe.

import './App.css';

const App = () => {
  return (
    <div>
      <p style={{fontSize: '2rem'}}>
        Some <span className="red-text">colorful</span> text
      </p>
    </div>
  );
};

export default App;

définir la couleur du texte en css global

Cette approche nous permet de réutiliser les styles couramment utilisés en les définissant dans un fichier
global css global.

C’est une bonne pratique que d’importer votre fichier global css dans vos fichiers index.js fichier
car ils ne seraient pas chargés uniquement lorsque certains composants sont montés.

Laisser un commentaire