From 5d3c6d2001349f87c3e02c9b9cce8258d0869235 Mon Sep 17 00:00:00 2001
From: Cody Hoover <hoovercj@users.noreply.github.com>
Date: Thu, 9 May 2019 23:48:03 +0200
Subject: [PATCH] Scope button style overrides to fabric components

Addresses #9036

__Problem:__ The margin and overflow styles are applied globally and affect non-Fabric elements.

__Solution:__ The styles should be scoped to only Fabric elements.
---
 .../src/components/Fabric/Fabric.styles.ts          | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts
index 675ae2e5e7999..f7deff6dad86e 100644
--- a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts
@@ -2,6 +2,11 @@ import { getGlobalClassNames } from '../../Styling';
 import { IFabricStyleProps, IFabricStyles } from './Fabric.types';
 
 const inheritFont = { fontFamily: 'inherit' };
+const buttonStyles = {
+  ...inheritFont,
+  overflow: 'visible',
+  margin: 0
+};
 
 const GlobalClassNames = {
   root: 'ms-Fabric'
@@ -24,13 +29,9 @@ export const getStyles = (props: IFabricStyleProps): IFabricStyles => {
       {
         color: theme.palette.neutralPrimary,
         selectors: {
-          '& button': inheritFont,
+          '& button': buttonStyles,
           '& input': inheritFont,
-          '& textarea': inheritFont,
-          ':global(button)': {
-            overflow: 'visible',
-            margin: 0
-          }
+          '& textarea': inheritFont
         }
       },
       className