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 Pro Dev & ISV

I have the same question (0)

All responses (2)

Answers (0)

cchannon 4,702 Moderator on at

Like (2)

Report

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.

Was this reply helpful? Yes No
Arcadi 57 on at

Like (0)

Report

Thanks @cchannon for your answer,
I've tried Fluent UI before and I'll probably stick to it in the future

Was this reply helpful? Yes No