Modifier la couleur/le thème des composants Office UI Fabric React?

Question

J'essaie d'utiliser Office UI Fabric React components dans mon application web. Y at-il un moyen de changer la couleur ou le thème des composants? Par exemple, j'ai essayé quelque chose comme ceci:

ReactDOM.render(
    <DefaultButton 
    className='my-button' 
    text='Test Button' 
    />, 
    document.getElementById('root') 
); 

my-button est une classe définie comme la couleur css de fond rouge. Mais en réalité cela n'a rien changé. La couleur d'arrière-plan du bouton est toujours la valeur par défaut #f4f4f4.

Est-il possible de changer les couleurs des composants?

[MISE À JOUR] Idéalement, je pense que je veux changer globalement le thème des composants afin que mon application puisse avoir un aspect cohérent.

Merci!

Answer 1

Après avoir lu this et creuser dans l'interface utilisateur de bureau tissue React code source sur GitHub, je pense que je l'ai trouvé une solution. Je suppose que j'aurais probablement mieux exprimé ma véritable intention dans ma question originale. (Désolé à ce sujet et j'ai déjà mis à jour la question). Ce que je voulais vraiment était de changer globalement la couleur des boutons (et des couleurs des autres composants) en fonction d'un certain thème, plutôt que de changer individuellement.

Donc, ma solution est d'ajouter les lignes suivantes avant de rendre le bouton:

import { loadTheme } from 'office-ui-fabric-react/lib/Styling'; 

loadTheme({ 
    palette: { 
    'neutralPrimary': 'yellow', // Used for button text 
    'neutralLighter': 'red',  // Used for button background 
    } 
}); 

Pour différents composants, vous aurez besoin de trouver les noms de couleurs droite utilisés pour les différentes parties de l'interface utilisateur. Par exemple, dans l'extrait de code ci-dessus, nous pouvons voir 'neutralPrimary' est utilisé pour rendre le texte du bouton et 'neutralLighter' est utilisé pour rendre l'arrière-plan du bouton. Je devais lire le source code pour les comprendre. Je ne sais pas s'il y a des moyens plus faciles. Mais rappelez-vous que ces changements sont globaux et affecteront d'autres composants qui s'appuient sur ces codes de couleur.

Mais toujours grâce à @jeunesse pour la réponse!

Answer 2

Est-il possible de changer les couleurs des composants?

Oui, il vous suffit de vous assurer que vos my-button styles ont une spécificité plus élevée et remplaceront les valeurs par défaut appliquées.

Si vous utilisez color: red !important cela fonctionnerait bien sûr, mais seulement pour démontrer que c'est possible.

Pour quelque chose de plus durable, la cible de votre composant parent plus votre bouton:

.parent .my-button { 
    color: red; 
}