Showing results for 
Search instead for 
Did you mean: 
Helper I
Helper I

Get default CSS for field in PCF


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?


Super User
Super User

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.

Helper I
Helper I

Thanks @cchannon for your answer, 

I've tried Fluent UI before and I'll probably stick to it in the future 

Helpful resources

UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Power Apps Community Call Jan. 2022 768x460.png

Power Apps Community Call

Please join us on Wednesday, January 19th, at 8a PDT. Come and learn from our amazing speakers!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Users online (1,688)