diff --git a/common/changes/office-ui-fabric-react/component-calloutprops-classname_2017-12-11-20-00.json b/common/changes/office-ui-fabric-react/component-calloutprops-classname_2017-12-11-20-00.json
new file mode 100644
index 0000000000000..eac96ed35f8aa
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/component-calloutprops-classname_2017-12-11-20-00.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Fix ComboBox, ContextualMenu, Teachingbubble overwriting calloutProps.className",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "kurt.carpenter@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.test.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.test.tsx
index 5d7513d8d3c09..5b2d2896df638 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.test.tsx
@@ -377,4 +377,20 @@ describe('ComboBox', () => {
     wrapper.update();
     expect(wrapper.find('.ms-ComboBox input').props().value).toEqual('Text');
   });
+
+  it('merges callout classNames', () => {
+    ReactTestUtils.renderIntoDocument<ComboBox>(
+      <ComboBox
+        options={ DEFAULT_OPTIONS }
+        calloutProps={ { className: 'foo' } }
+      />
+    );
+
+    setTimeout(() => {
+      let callout = document.querySelector('.ms-Callout') as HTMLElement;
+      expect(callout).toBeDefined();
+      expect(callout.classList.contains('ms-ComboBox-callout')).toBeTruthy();
+      expect(callout.classList.contains('foo')).toBeTruthy();
+    }, 0);
+  });
 });
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
index 315d4690ff8c8..562ac52ed6819 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
@@ -16,7 +16,8 @@ import {
   getId,
   getNativeProps,
   KeyCodes,
-  customizable
+  customizable,
+  css
 } from '../../Utilities';
 import { SelectableOptionMenuItemType, ISelectableOption } from '../../utilities/selectableOption/SelectableOption.types';
 import {
@@ -867,7 +868,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
         directionalHint={ DirectionalHint.bottomLeftEdge }
         directionalHintFixed={ true }
         { ...calloutProps }
-        className={ this._classNames.callout }
+        className={ css(this._classNames.callout, calloutProps ? calloutProps.className : undefined) }
         target={ this._comboBoxWrapper }
         onDismiss={ this._onDismiss }
         onScroll={ this._onScroll }
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
index 628199910bb4e..16fec0603113c 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
@@ -508,6 +508,23 @@ describe('ContextualMenu', () => {
     expect(menuMountedFirst).toEqual(false);
   });
 
+  it('merges callout classNames', () => {
+    ReactTestUtils.renderIntoDocument<ContextualMenu>(
+      <ContextualMenu
+        items={ [{
+          name: 'TestText 0',
+          key: 'TestKey0'
+        }] }
+        calloutProps={ { className: 'foo' } }
+      />
+    );
+
+    let callout = document.querySelector('.ms-Callout') as HTMLElement;
+    expect(callout).toBeDefined();
+    expect(callout.classList.contains('ms-ContextualMenu-Callout')).toBeTruthy();
+    expect(callout.classList.contains('foo')).toBeTruthy();
+  });
+
   it('Contextual Menu submenu has chrevron icon even if submenu has no items', () => {
     const menuWithEmptySubMenu: IContextualMenuItem[] = [
       {
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 2ab90b4c2c58c..a0e1990759f61 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -24,7 +24,8 @@ import {
   getWindow,
   customizable,
   getFirstFocusable,
-  getLastFocusable
+  getLastFocusable,
+  css
 } from '../../Utilities';
 import { withResponsiveMode, ResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
 import { Callout } from '../../Callout';
@@ -280,7 +281,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
           gapSpace={ gapSpace }
           coverTarget={ coverTarget }
           doNotLayer={ doNotLayer }
-          className='ms-ContextualMenu-Callout'
+          className={ css('ms-ContextualMenu-Callout', calloutProps ? calloutProps.className : undefined) }
           setInitialFocus={ shouldFocusOnMount }
           onDismiss={ this.props.onDismiss }
           onScroll={ this._onScroll }
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.test.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.test.tsx
index 963a3cc0d6c49..bbfc2130364fa 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.test.tsx
@@ -33,4 +33,18 @@ describe('TeachingBubble', () => {
     expect(titleElement!.textContent).toEqual('Title');
   });
 
+  it('merges callout classNames', () => {
+    ReactTestUtils.renderIntoDocument<TeachingBubbleContent>(
+      <TeachingBubbleContent
+        headline='Title'
+        calloutProps={ { className: 'foo' } }
+      />
+    );
+    setTimeout(() => {
+      let callout = document.querySelector('.ms-Callout') as HTMLElement;
+      expect(callout).toBeDefined();
+      expect(callout.classList.contains('ms-TeachingBubble')).toBeTruthy();
+      expect(callout.classList.contains('foo')).toBeTruthy();
+    }, 0);
+  });
 });
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
index cc7c4cf1eeb6c..69d40641206e3 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
@@ -39,10 +39,10 @@ export class TeachingBubble extends BaseComponent<ITeachingBubbleProps, ITeachin
 
     return (
       <Callout
-        className={ css('ms-TeachingBubble', styles.root, this.props.isWide ? styles.wideCallout : null) }
         ref={ this._resolveRef('_callout') }
         target={ targetElement }
         {...calloutProps}
+        className={ css('ms-TeachingBubble', styles.root, this.props.isWide ? styles.wideCallout : null, calloutProps ? calloutProps.className : undefined) }
       >
         <TeachingBubbleContent { ...this.props } />
       </Callout>