Showing results for 
Search instead for 
Did you mean: 
Advocate II
Advocate II

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? 🙂

Solution Sage
Solution Sage

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".
Advocate II
Advocate II

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

PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!


Are Your Ready?

Test your skills now with the Cloud Skill Challenge.


Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Users online (69,104)