Office UI Fabric Reactコンポーネントの色/テーマを変更しますか？

Question

私はウェブアプリケーションでOffice UI Fabric React componentsを使用しようとしています。コンポーネントの色やテーマを変更する方法はありますか？例えば、私はこのような何かを試してみました：

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

my-buttonは赤の背景色として定義されるCSSクラスです。しかし実際には何も変わらなかった。ボタンの背景色は依然としてデフォルトの#f4f4f4です。

コンポーネントの色を変更することはできますか？

[UPDATE]私のアプリが一貫したルック・アンド・フィールを持つように、コンポーネントのテーマをグローバルに変更したいと思うのが理想的です。

ありがとうございます！

Answer 1

thisを読んで、OfficeのUIファブリックに掘りした後は、私は解決策を見つけたと思う、GitHubの上でソースコードを反応します。私はおそらく私の最初の質問に私の本当の意図を表現しておくべきだったと思う。 （申し訳ありませんが、私はすでに質問を更新しています）。私が本当に欲しかったことは、個別に変更するのではなく、特定のテーマに基づいてボタンの色（および他のコンポーネントの色）をグローバルに変更することでした。

だから私のソリューションは、ボタンをレンダリングする前に以下の行を追加することです：

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

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

異なるコンポーネントについて、あなたは別のUI部品に使用する右の色の名前を見つける必要があります。たとえば、上記のコードスニペットでは、ボタンのテキストのレンダリングに「neutralPrimary」、ボタンの背景のレンダリングに「neutralLighter」が使用されています。私はそれらを理解するためにsource codeを読まなければならなかった。簡単な方法があるかどうかはわかりません。

しかし、これらの変更はグローバルであり、これらのカラーコードに頼っている他のコンポーネントに影響します。

まだ応答のための@enjoylifeに感謝！

Answer 2

コンポーネントの色を変更することはできますか？

はい、あなたは自分のmy-buttonスタイルがより高い特異性を持っており、適用されるデフォルト値を上書きします確認する必要があります。

color: red !importantを使用している場合、それはもちろん動作可能ですが、可能であることを示すためだけです。より持続可能なものについては

、あなたの親コンポーネントに加えて、あなたのボタンをターゲット：

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