Showing results for 
Search instead for 
Did you mean: 
Kudo Collector
Kudo Collector

PCF + Semantic UI React

Hi community,

Semantic UI React offers more customizations in my opinion than Microsoft Fluent UI.
An example is the Semantic UI React Dropdown control: you can search for elements and even add new items!

I tried PCF with Semantic UI React ... in testing it works fine, but when I load the control on form model-driven apps the semantic.css library conflicts with the Microsoft system layout!

As Microsoft important warns:
"When you implement styling to your code components using CSS, ensure that the CSS is scoped to your control using the automatically generated CSS classes applied to the container DIV element for your component. If your CSS is scoped globally, it will likely break the existing styling of the form or screen where the code component is rendered. If using a third-party CSS framework, use a version of that framework that is already namespaced or otherwise wrap that framework in a namespace manually either by hand or using a CSS preprocessor. "

So, How can I use a preprocessor??
PCF CLI doesn't recognize Sass or Less! With React Semantic Theming also needs Sass! And editing the webpackconfig.js file in /node_modules/pcf-scripts/ path doesn't seem like a consistent idea. Webpack also doesn't run the added "loader" plugins .... for example, pcf-sass-loader (see this article  ) doesn't work for me.

Kindly, has anyone figure out the preprocessor problem or the semantic.css reference? 🙂

Memorable Member
Memorable Member

I think you are going to be in such a world of pain with conflicting CSS that I would simply just use Microsoft's Fluent UI. 


Even if you can get it working now it may only take a slight change within the CSS of the rest of the page to create new layout issues

If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".
Kudo Collector
Kudo Collector

Thank you Ben!

Ok, using Fluent UI is more secure but....with Fluent UI I can't get the ambitious feature provided by Semantic UI: the best free Dropdown with Search Input  and Allow Additions (available only for React) .


It may seem absurd though, if in the old CDS E-R models someone used the Option Set fields (dropdowns) instead of the lookup fields ... this feature could be useful ... a more dynamic dropdown to Option Set!


Helpful resources

October Events

Mark Your Calendars

So many events that are happening this month - don't miss out!

Ignite 2022


Explore the latest innovations, learn from product experts and partners, level up your skillset, and create connections from around the world.

Power Apps Africa Challenge 2022

Power Apps Africa Challenge

Your chance to join an engaging competition of Power Platform enthusiasts.

Users online (4,161)