Ändern Sie die Farbe/das Design von Office UI Fabric React-Komponenten?

Question

Ich versuche Office UI Fabric React components in meiner Web-App zu verwenden. Gibt es eine Möglichkeit, die Farbe oder das Thema der Komponenten zu ändern? Zum Beispiel habe ich versucht, so etwas wie diese:

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

my-button ist eine CSS-Klasse als rote Hintergrundfarbe definiert. Aber eigentlich hat es nichts geändert. Die Hintergrundfarbe der Schaltfläche ist immer noch die Standardeinstellung #f4f4f4.

Ist es überhaupt möglich, die Farben der Komponenten zu ändern?

[UPDATE] Idealerweise denke ich, ich möchte das Thema der Komponenten global ändern, so dass meine App ein einheitliches Aussehen und Gefühl haben kann.

Danke!

Answer 1

Nach this und Graben in die Office-Benutzeroberfläche Fabric Quellcode auf GitHub Reagieren zu lesen, ich glaube, ich eine Lösung gefunden habe. Wahrscheinlich hätte ich meine wahre Absicht in meiner ursprünglichen Frage besser ausgedrückt. (Entschuldigung und ich habe die Frage bereits aktualisiert). Was ich wirklich wollte, war, die Farbe von Knöpfen (und Farben anderer Komponenten) basierend auf einem bestimmten Thema global zu ändern, anstatt sich einzeln zu ändern.

Also meine Lösung ist, die folgenden Zeilen vor dem Rendern die Schaltfläche hinzufügen:

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

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

Für verschiedene Komponenten, müssen Sie die richtigen Farbnamen für verschiedene UI-Teile verwendet finden. Im obigen Codefragment sehen wir zum Beispiel "neutralPrimary" zum Rendern des Schaltflächentexts und "neutralLighter" zum Rendern des Schaltflächenhintergrunds. Ich musste die source code lesen, um sie herauszufinden. Nicht sicher, ob es leichtere Wege gibt.

Denken Sie jedoch daran, dass diese Änderungen global sind und sich auf andere Komponenten auswirken, die diese Farbcodes verwenden.

Aber trotzdem danke an @enjoylife für die Antwort!

Answer 2

Ist es überhaupt möglich, die Farben der Komponenten zu ändern?

Ja, Sie müssen nur sicherstellen, dass Ihre my-button Stile haben eine höhere Spezifität und wird die Standardwerte außer Kraft angewendet.

Wenn Sie verwenden, würde das natürlich funktionieren, aber nur für den Nachweis, dass es möglich ist.

Für etwas nachhaltiger, Ihr die übergeordnete Komponente plus Ihre Schaltfläche Ziel:

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