MuiThemeでテーマをスタイリングするときのカスタムクラスの使用

Question

以下のコード（Entire Code is found here）を使用して、MaterialUIで提供されるすべてのコンポーネントのスタイルを設定できます。しかし、同じコンポーネントの2つの異なるスタイルを使用する必要がある場合があります。たとえば、ダイアログボックスや引き出しのAppBarが異なる色になることがあるのに対して、AppBarはアプリケーション全体で緑色になることがあります。どうすればこれを達成できますか？ "別の" AppBarにクラスをアタッチした場合、このコードのクラスを使用してスタイルを指定できますか？構文はどのように機能しますか？

基本的に、私はこれらの2つのAppBarsを別々に表示します。 1赤と1緑

//no class needed on this one because it displays the default AppBar colors 
<AppBar 
    title="Hulk" 
/> 

//A class here to identify it and modify it 
<AppBar 
    className="red-header" 
    title="Ironman" 
/> 

現在、CSSで！importantを使用してクラスを上書きしています。私はそれをしたくありません。 v0.xアプリケーションバーの場合は、事前

Answer 1

で

export default function getMuiTheme(muiTheme, ...more) { 
    muiTheme = merge({ 
     zIndex, 
     isRtl: false, 
     userAgent: undefined, 
    }, lightBaseTheme, muiTheme, ...more); 

    const {spacing, fontFamily, palette} = muiTheme; 
    const baseTheme = {spacing, fontFamily, palette}; 

    muiTheme = merge({ 
    appBar: { 
     color: palette.primary1Color, 
     textColor: palette.alternateTextColor, 
     height: spacing.desktopKeylineIncrement, 
    } 
}, muiTheme, { 
    baseTheme, // To provide backward compatibility. 
    rawTheme: baseTheme, // To provide backward compatibility. 
}); 

おかげで、あなたは、この場合の紙には、ルート要素のインラインスタイルを上書きするstyle小道具を使用することができます。背景色を指定するだけで済みます。あなたはspeficallyかかわらず、テーマを使用したい場合は

、ネストできます複数のテーマ：

const Main =() => (
    <MuiThemeProvider muiTheme={myMuiTheme1}> 
    <AppBar title="My AppBar 1" /> 
     <MuiThemeProvider muiTheme={myMuiTheme2}> 
     <AppBar title="My AppBar 2" /> 
     </MuiThemeProvider> 
    </MuiThemeProvider> 
);