Here is the next post of the series in regards to styling of FluentUI controls to look native in the UCI interface. Today my post is dedicated to Dropdown control that is now called “Choice” in Dataverse.

Let’s compare uncustomized and UCI controls side-by-side in both enabled and disabled states:

As you might see there are a lot of differences in the styling of controls. Let’s add the following styling to the Dropdown component and use it in the component’s code:

import { IDropdownStyleProps, IDropdownStyles } from "@fluentui/react";

export const DropdownStyle = (props: IDropdownStyleProps): Partial<IDropdownStyles> => ({
    ...(props.disabled ? {
        root: {
            width: "100%"
        },
        title: {
            color: "rgb(50, 49, 48)",
            borderColor: "transparent",
            backgroundColor: "transparent",
            fontWeight: 600,
            ":hover": {
                backgroundColor: "rgb(226, 226, 226)"
            }
        },
        caretDown: {
            color: "transparent"
        }
    }: {
        root: {
            width: "100%"
        },
        title: {
            borderColor: "transparent",
            fontWeight: 600,
            ":hover": {
                borderColor: "rgb(96, 94, 92)",
                fontWeight: 400
            }
        },
        caretDown: {
            color: "transparent",
            ":hover": {
                color: "rgb(96, 94, 92)"
            }
        },
        dropdown: {
            ":focus:after": {
                borderColor: "transparent"
            }
        }
    })
});

Now the controls start to look more similar. Now, let’s work on the “placeholder”. In this case, just assigning “—” to placeholder property won’t work because during the mouse hover UCI control changes it to “–Select–” on the fly:

In order to solve this challenge I used state and I changed it on MouseEnter and MouseLeave events:

  const [placeholder, setPlaceholder] = React.useState<string>("---");

  return (
    <Dropdown
      styles={DropdownStyle}
      placeholder={placeholder}
      options={props.options}
      onMouseEnter={() => {
        setPlaceholder("--Select--");
      }}
      onMouseLeave={() => {
        setPlaceholder("---");
      }}
    />
  );

The source code of the control can be found in this repository – https://github.com/AndrewButenko/FluentUI4UCIControls

Cover Photo by Fotis Fotopoulos on Unsplash