更改Office UI Fabric React組件的顏色/主題？

我正在嘗試在我的網絡應用程序中使用Office UI Fabric React components。有沒有辦法改變組件的顏色或主題？例如，我想是這樣的：更改Office UI Fabric React組件的顏色/主題？

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

my-button是定義爲紅色背景色CSS類。但實際上它沒有改變任何東西。按鈕背景顏色仍然是默認#f4f4f4。

是否有可能改變組件的顏色？

[UPDATE]理想情況下，我想我想在全球範圍內更改組件的主題，以便我的應用可以具有一致的外觀和感覺。

謝謝！

來源

2017-08-04 Yutao Huang

閱讀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的回覆！

來源

2017-08-05 09:13:50

是否有可能改變組件的顏色？

是，你只需要確保你的my-button款式有較高的特異性，將覆蓋應用的默認值。

如果您使用color: red !important，當然可以，但僅用於證明這是可行的。

對於一些更可持續的，針對你的父組件加上您的按鈕：

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

來源

2017-08-05 00:48:29 enjoylife

更改Office UI Fabric React組件的顏色/主題？

回答

相關問題