title: Office UI Fabric - How to apply css styles to existing components
body: <p>I'm using the provided components and every time I need to change a component style I wonder what's the proper way to do it.</p>
  
  <p>Lets say I need to change the IconButton background color when  it's disabled.
  <a href="https://codepen.io/elsl/pen/KrQQdV" rel="nofollow noreferrer">https://codepen.io/elsl/pen/KrQQdV</a></p>
  
  <p>If I provide a theme, how am I supposed to know which palette/semanticColor is used by that component?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const iconsTheme = Fabric.createTheme({
    semanticColors: {
      disabledBackground: "#ff9933"
    }
  });
      
  
  &lt;Fabric.IconButton
    iconProps={{iconName:'ChevronRight'}}
    disabled
    theme={iconsTheme}
  /&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>If I provide an IButtonStyles, how am I supposed to know that the property name is "rootDisabled.backgroundColor"?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const iconButtonStyles: IButtonStyles = {
         rootDisabled: {
           backgroundColor: "#ff0000",
         }
  };
  
  &lt;Fabric.IconButton
     iconProps={{iconName:'CalculatorEqualTo'}}
     disabled   
     styles={iconButtonStyles}
  /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>For both these options, I had to dig into the <a href="http://%20%20%20%20%20%20%20%20%20office-ui-fabric-react/packages/office-ui-fabric-react/src/components/Button/BaseButton.styles.ts" rel="nofollow noreferrer">component's source code</a> on github to find out.</p>
  
  <p><strong>Is this the expected/correct way?</strong>
  If so, between creating a Theme or an IStyle which would be the ideal/best practice?</p>