changes on SitePicker add Styles property

Author: joaojmendes

src/controls/sitePicker/ISitePicker.ts

@@ -1,3 +1,5 @@
+import { IDropdownStyles } from 'office-ui-fabric-react';
+
 import { BaseComponentContext } from '@microsoft/sp-component-base';
 
 export interface ISite {
@@ -112,4 +114,5 @@ export interface ISitePickerProps {
    * Applicable if mode is set to site or web.
    */
   additionalQuery?: string;
+  styles?:IDropdownStyles;
 }

src/controls/sitePicker/SitePicker.tsx

@@ -1,17 +1,34 @@
-import { Async } from '@uifabric/utilities/lib/Async';
+import * as React from 'react';
+
 import findIndex from 'lodash/findIndex';
 import orderBy from 'lodash/orderBy';
-import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+import {
+  Dropdown,
+  IDropdownOption,
+} from 'office-ui-fabric-react/lib/Dropdown';
 import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
-import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
+import {
+  Spinner,
+  SpinnerSize,
+} from 'office-ui-fabric-react/lib/Spinner';
 import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
-import { ISelectableOption, SelectableOptionMenuItemType } from 'office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.types';
-import * as React from 'react';
+import {
+  ISelectableOption,
+  SelectableOptionMenuItemType,
+} from 'office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.types';
+
+import { Async } from '@uifabric/utilities/lib/Async';
 
 import * as telemetry from '../../common/telemetry';
 import { toRelativeUrl } from '../../common/utilities/GeneralHelper';
-import { getAllSites, getHubSites } from '../../services/SPSitesService';
-import { ISite, ISitePickerProps } from './ISitePicker';
+import {
+  getAllSites,
+  getHubSites,
+} from '../../services/SPSitesService';
+import {
+  ISite,
+  ISitePickerProps,
+} from './ISitePicker';
 
 const styles = mergeStyleSets({
   loadingSpinnerContainer: {
@@ -73,7 +90,8 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
     className,
     selectedSites,
     trimDuplicates,
-    additionalQuery
+    additionalQuery,
+    styles
   } = props;
 
   const [isLoading, setIsLoading] = React.useState<boolean>();
@@ -283,6 +301,7 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
         onChange={onSelectionChange}
         notifyOnReselect={true}
         className={className}
+        styles={styles}
       />
     </>
   );