Get default CSS for field in PCF

(0) Share

Report

Posted on by Arcadi

Hello!

I created a very simple PCF, a SingleLine.Text with an HTML password attribute:

It looks nice, like a standard field, but the reality is that there is custom CSS, some of it I copied from other PCF's in Github and some other properties I had to tweak them myself. If I don't add CSS it looks like:

The problem with that is that when Microsoft changes the CSS, for example making the border blue on hover my PCF will retain the old design.

Microsoft uses this classes:

The problem is that those classes are dynamic, so I cannot have my input the classes "pa-x pa-bv..." because won't work in the next refresh.

Any ideas of how to use the default classes/CSS without hardcoding them in my PCF CSS file?

Thanks

Categories:

Power Apps component framework

All responses (2)

Answers (0)

Arcadi 57 on at

Like (0)

Report

Re: Get default CSS for field in PCF

Thanks @cchannon for your answer,
I've tried Fluent UI before and I'll probably stick to it in the future
cchannon 4,702 Super User 2025 Season 1 on at

Like (2)

Report

Re: Get default CSS for field in PCF

Well, you could read the style elements from other fields on the form, but that would mean a lot of dom browsing and would be very brittle. If you try it, you're probably only going to introduce problems and break your own code when--as you say--Microsoft changes the CSS (or something more fundamental).

I think you'd be much better off not trying to get an exact styling match and instead just use something that matches the overall aesthetic. I generally use Fluent UI controls for the reason; they are close enough to the styling of OOB Dataverse controls and--more importantly--Microsoft maintains them for me. So if some day Microsoft decides that a meaningful style change is appropriate to their controls, they are likely to make it in Dataverse and in the Fluent UI controls both.