Back in February, I had in plan to share the series of articles that were dedicated to the styling of FluentUI controls and making them look like the native UCI controls. I had a chance to compose the post about the styling of TextField. Unfortunately, my plans changed and I had no time to work on the articles. Now, I got some bandwidth so I decided to get back to the original plan. In this article, I will provide code, instructions, and an example of a fully functioning component that you can use when you work on your controls on how to make DatePicker field to lookalike native UCI control. Huge shout out to Scott Durow who helped me with the child selectors issue I experienced.

Let’s compare UCI control and non-styled DatePicker side-by-side (both active and inactive):

Let’s apply the following styling to the DatePicker component and compare the result:

import { IDatePickerStyleProps, IDatePickerStyles } from "@fluentui/react/lib/DatePicker";

export const datePickerStyle = (props: IDatePickerStyleProps): Partial<IDatePickerStyles> => ({
    ...(props.disabled ? {
      textField: {
        borderColor: "transparent",
        "& .ms-TextField-fieldGroup": {
          borderColor: "transparent"
        },
        "& .ms-TextField-field": {
          backgroundColor: "transparent",
          borderColor: "transparent",
          ":hover": {
            backgroundColor: "rgb(226, 226, 226)"          
          }
        }
      },
      icon: {
        color: "rgb(50, 49, 58)"
      }
    } : {
      textField: {
        "& .ms-TextField-fieldGroup": {
          borderColor: "transparent",
          ":after": {
            borderColor: "transparent"
          }
        }
      },
      icon: {
        color: "rgb(50, 49, 58)"
      }
    }
  )});

The last touch to align styling is adding the placeholder in order to show “—” when the field doesn’t have the value. In order to do it set the “placeholder” property of the DatePicker component to “—“:

<DatePicker
   placeholder="---"
   styles={datePickerStyle}
/>

In order to demonstrate how to use this code, I created a PCF component and pushed it to GitHub. Here is the brief demo of the control:

Photo by Matthew Fournier on Unsplash