Material-ui @next自定義按鈕顏色？

Question

我很努力修改Material-UI @ next（v1）中的按鈕顏色。

如何設置muitheme的行爲與bootstrap的相似性，所以我可以對紅色使用「btn-danger」，對於綠色使用「btn-danger」...？

我試着用自定義className，但它不能正常工作（懸停顏色不會改變），它似乎重複。我有什麼選擇？

Answer 1

可以創建爲每個其3支撐intentions（伯，仲，誤差）定義調色板一個theme，然後使用color支柱上<Button>以使用那些。在您的示例btn-danger可能是<Button color='error'>

從their docs（下調一點點在這裏）：

const theme = createMuiTheme({ 
    palette: { 
    primary: purple, 
    secondary: green, 
    error: red, 
    }, 
}); 

function Palette() { 
    return (
    <MuiThemeProvider theme={theme}> 
     <div> 
     <Button color="primary">{'Primary'}</Button> 
     <Button color="accent">{'Accent'}</Button> 
     <Button color="error">{'Error'}</Button> // added the error here 
     </div> 
    </MuiThemeProvider> 
); 
} 

您可以探索他們的文檔的其餘部分在自定義主題，也許使用Business Variables爲好，但回到必須使用className及其withStyles() HOC。

Answer 2

Bagelfp的回答有一個錯誤，還有一些其他問題需要考慮;

首先，'error'不是material-ui @ next v1的支持的顏色主題Button component。顏色道具只接受「默認」，「繼承」，「主要」和「次要」。

這是我發現的最簡單的方法。首先，選擇兩種最常見的主題顏色，並將它們放在應用程序的根目錄下。

import React from 'react'; 
import { Component } from './Component.js' 
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'; 

const theme = createMuiTheme({ 
    palette: { 
    primary: purple, 
    secondary: green, 
    error: red, 
    }, 
}); 

export class App extends Component { 
    render() { 
    return (
     <MuiThemeProvider theme={theme}> 
     <Component /> 
     ... 
     </MuiThemeProvider> 
    ); 
    } 
} 

然後在您的組件中，只需選擇您想要的顏色的主題;

import React from 'react'; 
import Button from 'material-ui/Button'; 

export const Component = (props) => (
    <div> 
    <Button variant="fab" color="primary"> 
     I am purple, click me! 
    </Button> 
    </div> 
) 

如果你需要一個第三和第四顏色，你可以簡單地出口Component.js與你一樣在App.js.做了一個新的調色板

這是我發現的唯一解決方案，允許我保留黑暗的懸停效果（official override examples沒有保留懸停功能）。我真的希望我能找到一種方法來在調用Button時簡單地使用新的主題顏色，但現在這是最簡單的方法。