素材uiカスタムテーマの実装

Question

次にMaterial-UIでカスタムテーマを実装する方法は？ 私はドキュメントを読むが、私は本当にそれを

Answer 1

を理解diden'tそれはここ前方かなりストレートだ例です

// First we need the theme provider and the theme creator 
import {createMuiTheme, MuiThemeProvider} from 'material-ui/styles'; 

// For this example I'll also be using the amber and blue color profiles 
import amber from 'material-ui/colors/amber'; 
import blue from 'material-ui/colors/blue'; 

// Now let us create our theme 

const theme = createMuiTheme({ 
    palette: { 
     type: 'dark', 
     primary: amber, 
     secondary: { 
      ...blue // I'm using the spread operator because I want to overwrite some colors 
      A400: '#A7FFEB' // Overwrite the accent 400 color with custom 
     } 
    } 
}); 

// Let my components know about the theme 

ReactDOM.render(
    <MuiThemeProvider theme={theme}> 
     <App/> 
    </MuiThemeProvider> 
) 

これは、それを取得と同じくらい簡単ですが、それは全体のポイントを取得します。材料-UIが提供するカラープロファイルは次のようになりオブジェクトです：

{ 
    50: string; 
    100: string; 
    200: string; 
    300: string; 
    400: string; 
    500: string; 
    600: string; 
    700: string; 
    800: string; 
    900: string; 
    A100: string; 
    A200: string; 
    A400: string; 
    A700: string; 
    contrastDefaultColor: 'light' | 'dark'; 
} 

だから、あなたがあなた自身を作りたいと思った場合、あなたの可能性は非常に簡単に上記のインターフェースを次のオブジェクトを作成することもできます。テーマプロバイダは、プライマリパレット、セカンダリパレット、およびエラーパレットを受け入れます。コンポーネントの構成方法に応じて、パレットの色を内部的に決定します。

はあなたが設定することができ、他のオプションのトンがあり、かつ完全なドキュメントはここhere

である私はそれが役に立つかどうカスタムテーマの構築を支援するために開発されたカスタムスクリプトがある

import tinycolor from 'tinycolor2' 



function buildPaletteFrom(color, accent) { 
    accent = accent || color; 
    color = tinycolor(color).darken(25); 

    let i = 1; 
    let palette = {}; 
    while (i < 10) { 
     color = color.lighten(5); 
     palette[(10 - i) * 100] = color.toHexString(); 
     i++; 
    } 

    palette['50'] = tinycolor(palette['100']).lighten(5); 
    palette['contrastDefaultColor'] = tinycolor(palette['500']).isLight() ? dark : light; 

    palette['A100'] = tinycolor(accent).lighten(20).saturate().brighten().toHexString(); 
    palette['A200'] = tinycolor(accent).lighten(15).saturate().brighten().toHexString(); 
    palette['A400'] = tinycolor(accent).toHexString(); 
    palette['A700'] = tinycolor(accent).darken(10).saturate().brighten().toHexString(); 

    if (palette['A400'] === palette['500']) { 
     palette['A400'] = tinycolor(palette['500']).lighten(5).saturate().brighten().toHexString(); 
    } 

    return palette 
} 

あなたをこのように使用できます

const primary = '#56B9D0'; 
const secondary = '#F24C27'; 
const accent = '#F8BA42'; 
const light = '#FEFEFE'; 
const dark = '#3B3F42'; 


const theme = createMuiTheme({ 
    palette: { 
     primary: buildPaletteFrom(primary), 
     secondary: buildPaletteFrom(secondary, accent), 
     light: buildPaletteFrom(light), 
     dark: buildPaletteFrom(dark), 
     common: { 
      white: light, 
      black: dark, 
     } 
    } 
});