如何將主題應用於來自反應工具箱的組件

我是新來對工具箱做出反應和反應的。 React工具箱使用scss。我不知道如何面對與其組件定製問題。如何將主題應用於來自反應工具箱的組件

這是我有：

<AppBar fixed flat title="Webocity" className="appBar"> 
    <Navigation type='horizontal' className="navbar" routes={linkroutes}> 
     </Navigation> 
    </AppBar>

用它導航組件的appbar組件。

我試着將CSS類appbar部件，它的工作。

然而，類名的導航組件不能正常工作，並想知道爲什麼。爲什麼它爲AppBar工作，而不是Navigation？另外，對於appBar CSS，背景特性被忽略，但不是高度特性。這是爲什麼？

另外，如何將主題傳遞給這些組件？我知道這需要寫在SCSS文件中。但我能得到它可能是一個非常簡單的例子嗎？

文檔顯示：

import theme from './PurpleAppBar.scss'; 

const PurpleAppBar = (props) => (
    <AppBar {...props} theme={theme} /> 
); 

export default PurpleAppBar;

但什麼是PurpleAppBar.scss，應該怎麼樣子呢？我相信這是一個自定義的SCSS文件？

另外，我工作的一個Web應用程序，從而材料的UI聽起來是不是很好的選擇，me.Do我們有什麼更好的增強用戶界面的反應web應用程序？

來源

2016-09-26 gags

陣營工具箱使用CSS模塊內部風格組件，我們建議您使用它。反應工具箱中的每個組件實現一個classNames的API，這些API根據狀態分配給每個DOM節點。你可以在文檔中看到API。

的theme屬性是實現該API的className與最終類和類名之間的匹配的形狀。假設你有一個CSS模塊

.button { 
    background-color: red 
}

那得到像{ button: 'MyButton--button__1262a' }對象解決。您可以將該對象賦予該組件，以便它將獲得按鈕className並將其設置到相應的節點中。謹防選擇優先。有時你需要提高優先級，你只需要在自定義組件的根目錄下添加一個className即可。文檔中有很多示例，您也可以查看示例回購。

如果你不想使用CSS模塊仍然可以實現主題化硬編碼模塊。例如，如果你想在你的css中寫一個.awesome-button類，你可以傳遞一個主題對象來告訴：{ button: "awesome-button" }。欲瞭解更多信息，請看react-css-themr。

來源

2016-10-12 23:21:19 javivelasco

如何將主題應用於來自反應工具箱的組件

回答

相關問題