PCF + Office UI Fabric React: Dropdown styling

[Menik1]

Hello,

I'm currently playing around with PCF in combination with Office UI Fabric React. 

I use the Dropdown control as seen here but inside the PCF test harness the styling doesn't look like it. (see screenshot).

Does anyone have a clue what I'm missing?

My TSX

import * as React from 'react';
import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';

export interface IEntityMetadataDropdownProps {
  entityLogicalName?: string;
  entityMetadataType?: ComponentFramework.PropertyTypes.EnumProperty<"All" | "Custom" | "System">;
  entityLogicalNameChanged: (newValue: string) => void;
}


const options: IDropdownOption[] = [
  { key: 'apple', text: 'Apple' },
  { key: 'banana', text: 'Banana' },
  { key: 'grape', text: 'Grape' },
  { key: 'broccoli', text: 'Broccoli' },
  { key: 'carrot', text: 'Carrot' },
  { key: 'lettuce', text: 'Lettuce' }
];

export class EntityMetadataDropdown extends React.Component<IEntityMetadataDropdownProps> {
  constructor(props: IEntityMetadataDropdownProps) {
    super(props);
  }
  
  public render(): JSX.Element {
    return  (
      <Dropdown placeholder="Select an entity" options={options} selectedKey={this.props.entityLogicalName} onChange={this._onChange} />
    );
  }

  private _onChange = (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption): void => {
    if(option){
      const selectedKey: string = option.key as string
      if (this.props.entityLogicalNameChanged) {
        this.props.entityLogicalNameChanged(selectedKey);
      }
    }
    else{
       this.props.entityLogicalNameChanged("");
    }  
  };
}

Index.ts (It's based upon the react example)

import { IInputs, IOutputs } from "./generated/ManifestTypes";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { EntityMetadataDropdown, IEntityMetadataDropdownProps } from "./EntityMetadataSelector"


export class EntityMetadataSelector implements ComponentFramework.StandardControl<IInputs, IOutputs> {

	private notifyOutputChanged: () => void;
  	// reference to the container div
	private theContainer: HTMLDivElement;
	  
    private props: IEntityMetadataDropdownProps = {
		entityLogicalNameChanged: this.entityLogicalNameChanged.bind(this)
	};

	/**
	 * Empty constructor.
	 */
	constructor()
	{

	}

	/**
	 * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
	 * Data-set values are not initialized here, use updateView.
	 * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
	 * @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
	 * @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
	 * @param container If a control is marked control-type='standard', it will receive an empty div element within which it can render its content.
	 */
	 public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
	 {
		// Add control initialization code
		this.notifyOutputChanged = notifyOutputChanged;
		this.props.entityLogicalName = context.parameters.EntityLogicalName.raw || undefined;
		this.props.entityMetadataType = context.parameters.EntityMetadataType;
		this.theContainer = container;
	 }


	/**
	 * Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
	 * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
	 */
	public updateView(context: ComponentFramework.Context<IInputs>): void
	{
		this.props.entityLogicalName = context.parameters.EntityLogicalName.raw || undefined;

		// Add code to update control view
		 // Render the React component into the div container
		 ReactDOM.render(
			// Create the React component
			React.createElement(
			  EntityMetadataDropdown, // the class type of the React component found in Facepile.tsx
			  this.props
			),
			this.theContainer
		  );
	}

	private entityLogicalNameChanged(newValue: string) {
		// only update if the number of faces has truly changed
		if (this.props.entityLogicalName !== newValue) {
		  this.props.entityLogicalName = newValue;
		  this.notifyOutputChanged();
		}
	  }

	/** 
	 * It is called by the framework prior to a control receiving new data. 
	 * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
	 */
	public getOutputs(): IOutputs
	{
		return {
			EntityLogicalName: this.props.entityLogicalName
		  };
	}

	/** 
	 * Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
	 * i.e. cancelling any pending remote calls, removing listeners, etc.
	 */
	public destroy(): void
	{
		// Add code to cleanup control if necessary
		ReactDOM.unmountComponentAtNode(this.theContainer);
	}
}

[ScottDurow]

Hi,
To get the style you want you will need to apply a className or styles to the drop down. The style will be influenced by the surrounding styles that comes with the test harness and so you’ll need to apply your own to override those.

[Menik1 · Accepted solution]

The test harness actually has a div element where a text-align: center is applied to it.

This effects everything in your own component.