title: Using custom classes when styling a theme in MuiTheme
body: <p>Using the code below (<a href="https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js" rel="nofollow noreferrer">Entire Code is found here</a>), it allows me to style all components provided in MaterialUI. However, there are instances when I need to use 2 different styles of the same component. For example, an AppBar may be green across the app while the AppBar in a dialog or Drawer may be a different color. How can I achieve this? If I attach a class to my "different" AppBar, can I use the class in this code to specify its styles? How would the syntax work?</p>
  
  <p>So basically, I want these two AppBars to display differently. i.e. 1 red and 1 green</p>
  
  <pre><code>//no class needed on this one because it displays the default AppBar colors
  &lt;AppBar 
      title="Hulk"
  /&gt;
  
  //A class here to identify it and modify it
  &lt;AppBar 
      className="red-header"
      title="Ironman"
  /&gt;
  </code></pre>
  
  <p>Currently, I am using a class and overwriting with !important in CSS. I don't want to do that.</p>
  
  <pre><code>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.
  });
  </code></pre>
  
  <p>Thanks in advance</p>