Fabric component: styles prop respected (#14827)

* fabric style fix. * Change files * fix
microsoft · Aug 31, 2020 · 3f948ab · 3f948ab
1 parent feafb74
commit 3f948ab
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/change/@fluentui-react-next-2020-08-31-13-10-51-fix-Fabric.json b/change/@fluentui-react-next-2020-08-31-13-10-51-fix-Fabric.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Fabric component: styles prop respected.",
+  "packageName": "@fluentui/react-next",
+  "email": "dzearing@hotmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-31T20:10:51.162Z"
+}
diff --git a/change/office-ui-fabric-react-2020-08-31-13-10-51-fix-Fabric.json b/change/office-ui-fabric-react-2020-08-31-13-10-51-fix-Fabric.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Fabric component: styles prop respected.",
+  "packageName": "office-ui-fabric-react",
+  "email": "dzearing@hotmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-31T20:10:43.104Z"
+}
diff --git a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.base.tsx b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.base.tsx
@@ -9,7 +9,6 @@ import {
   getRTL,
   FocusRects,
 } from '../../Utilities';
-import { getStyles } from './Fabric.styles';
 import { IFabricProps, IFabricStyleProps, IFabricStyles } from './Fabric.types';
 import { IProcessedStyleSet } from '@uifabric/merge-styles';
 import { ITheme, createTheme } from '../../Styling';
@@ -69,8 +68,8 @@ export class FabricBase extends React.Component<IFabricProps> {
   }
 
   private _getClassNames(): IProcessedStyleSet<IFabricStyles> {
-    const { className, theme, applyTheme } = this.props;
-    const classNames = getClassNames(getStyles, {
+    const { className, theme, applyTheme, styles } = this.props;
+    const classNames = getClassNames(styles, {
       theme: theme!,
       applyTheme: applyTheme,
       className,

diff --git a/packages/react-next/src/components/Fabric/Fabric.base.tsx b/packages/react-next/src/components/Fabric/Fabric.base.tsx
@@ -9,7 +9,6 @@ import {
   Customizer,
   useFocusRects,
 } from '../../Utilities';
-import { getStyles } from './Fabric.styles';
 import { IFabricProps, IFabricStyleProps, IFabricStyles } from './Fabric.types';
 import { IProcessedStyleSet } from '@uifabric/merge-styles';
 import { ITheme, createTheme } from '../../Styling';
@@ -34,9 +33,9 @@ const getDir = ({ theme, dir }: IFabricProps) => {
 };
 
 export const FabricBase = React.forwardRef((props: IFabricProps, ref: React.Ref<HTMLDivElement>) => {
-  const { className, theme, applyTheme, applyThemeToBody } = props;
+  const { className, theme, applyTheme, applyThemeToBody, styles } = props;
 
-  const classNames = getClassNames(getStyles, {
+  const classNames = getClassNames(styles, {
     theme: theme!,
     applyTheme: applyTheme,
     className,