The Pros and Cons of Fluent UI React

I recently got to know Fluent UI React when I used it in custom SPFx webpart. Fluent UI React is a framework of customizable components from Microsoft that fit seemlessly into Microsoft products like SharePoint. If you aren’t familiar with Fluent UI, don’t feel bad. It is the relatively new rebranded Office Fabric React. Ahh, you gotta love how Microsoft is always renaming things! Just when we get used to saying something, they decide to change it. So whether you know it as Office Fabric or Fluent UI, here is my take on working with it.

The things I like:

  • The variety of components from which to choose
    • There are basic inputs, pickers, lists, menus, surfaces, notifications and much more
  • For the most part, how relatively simple it is to import a component and get it working and looking great
  • The default styling that doesn’t require any code
  • The ability to customize the look and functionality of the components
  • Using CSS-in-JS
    • I have to be honest, I didn’t think I would like this. It is not how I learned to code, it bulks up your file, and it can be confusing at first. However, I love the idea of CSS that just belongs to my component. It doesn’t fight with other CSS and I don’t have to hunt for code affecting my component.

The things I don’t like:

  • The documentation is seriously lacking!!! I mean, it really isn’t good people.
    • I spent so many hours banging my head against the wall simply because things aren’t documented well.
    • Some will argue and say that the documentation includes sample code. Yeah, except many of the samples pull in hidden code or are missing critical pieces.
  • The inconsistency of the properties that are available on the components.
    • For example, not all inputs have error handling and/or validation properties.
  • The more complex components can be difficult to figure out, especially since the documentation is so awful.
    • For example, figuring out how to get the PeoplePicker to work in conjunction with a Microsoft Graph call nearly ended me.
  • Customizing the look of some of the components is pretty tricky as well, and again the documentation is no help.
    • For example, try to change the background color of the checkbox so that it matches the background color of the app.

Regardless of the cons, I would still recommend checking out Fluent UI and trying it in your next Microsoft 365 project. It can be frustrating at times, but I would still say the pros outweigh the cons.