2017-10-04 64 views
1

你好我嘗試定製UI材料的主要文本顏色,如何自定義文本顏色的材料UI以V 1.0.0

我這樣做是爲了自定義原色:

const blue = { 
    50: '#3ea5d7', 
    100: '#3ea5d7', 
    200: '#3ea5d7', 
    300: '#3ea5d7', 
    400: '#3ea5d7', 
    500: '#3ea5d7', 
    600: '#3ea5d7', 
    700: '#3ea5d7', 
    800: '#3ea5d7', 
    900: '#3ea5d7', 
    A100: '#3ea5d7', 
    A200: '#3ea5d7', 
    A400: '#3ea5d7', 
    A700: '#3ea5d7', 
    contrastDefaultColor: 'light', 
}; 

const muiTheme = createMuiTheme({ 
    palette: { 
    primary: blue, 
    }, 

但我沒有得到它如何自定義文本顏色。這個怎麼做?

+0

HTTP://www.material-ui。 com /#/ customization/themes – Freez

+0

我的意思是1.0.0版本的素材ui – bukso

回答

2

我終於找到了它的工作原理:

覆蓋您需要編寫完全成分的替代名稱類,例如按鈕MuiButton。覆蓋的工作順序與類名f.e.相同。如果我有.MuiButton標籤-1607作爲一流的療法應該是

override: { 
    MuiButton: { 
    label: { 
     color: 'white', ..... 

覆蓋標籤的顏色,所以我最後:

const blue = { 
    50: '#3ea5d7', 
    100: '#3ea5d7', 
    200: '#3ea5d7', 
    300: '#3ea5d7', 
    400: '#3ea5d7', 
    500: '#3ea5d7', 
    600: '#3ea5d7', 
    700: '#3ea5d7', 
    800: '#3ea5d7', 
    900: '#3ea5d7', 
    A100: '#3ea5d7', 
    A200: '#3ea5d7', 
    A400: '#3ea5d7', 
    A700: '#3ea5d7', 
    contrastDefaultColor: 'light', 
}; 

const yellow = { 
    50: '#3ea5d7', 
    100: '#3ea5d7', 
    200: '#3ea5d7', 
    300: '#3ea5d7', 
    400: '#3ea5d7', 
    500: '#3ea5d7', 
    600: '#3ea5d7', 
    700: '#3ea5d7', 
    800: '#3ea5d7', 
    900: '#3ea5d7', 
    A100: '#3ea5d7', 
    A200: '#3ea5d7', 
    A400: '#3ea5d7', 
    A700: '#3ea5d7', 
    contrastDefaultColor: 'light', 
}; 

const muiTheme = createMuiTheme({ 
    palette: createPalette({ 
    primary: blue, 
    secondary: yellow, 
    accent: yellow, 
    }), 
    overrides: { 
    MuiButton: { 
     raisedPrimary: { 
     color: 'white', 
     }, 
     raisedAccent: { 
     color: 'white', 
     }, 
    }, 
    MuiCheckbox: { 
     checked: { 
     color: '#607d8b', 
     }, 
    }, 
    MuiAppBar: { 
     colorPrimary: { 
     color: 'white', 
     }, 
    }, 
    }, 
});