You’re offline. This is a read only version of the page.
230
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? 🙂
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!
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
#1
WarrenBelz
109
Most Valuable Professional
#2
Michael E. Gernaey
82
Super User 2025 Season 1
#3
MS.Ragavendar
72
Share
Report
All responses (
Answers (
