Power Community

Power Community

Applying CSS in Virtual PowerApps Component Framework



Recently, while working on virtual PowerApps Component Framework control, I faced an issue that my CSS styling was not getting applied in my PCF control.

As I was coming from a standard PCF background, I only knew the standard way of applying CSS just to the control, following the below syntax.

From ControlManifest.Input.xml take the namespace and constructor and add them to the CSS file before the element.

In the CSS file, we apply CSS as follows, so the styling should be applied to only our control.

.KPI.LinearInputControl .className { display: block; padding: 0%; }


To resolve this issue, I found a way that I would like to share with you all.

Firstly, check the root component, and give the top-most parent element an id. For example, in my main component, the Stack component is my parent element. So I will add an id in that element. Now I can apply my CSS to all the components inside the Stack with the help of this id.

return (

{/* Child Components */}


Then use this id in CSS file to apply the styling to its child components. We can also give styling to child components if they are in other files as well.

Now, our CSS in .css file will look as shown below.

#LinearInputControl .className {
display: block;
padding: 0%;


Hence, we learned how to apply CSS in virtual PCF control.

Business Process Checklist

This post was originally published on this site

- Advertisement -spot_img


Please enter your comment!
Please enter your name here

- Advertisement - Advertisement

Latest News

Enable Early Access Wave 1 2023 | Power Platform

Like every 6 months, enabling Early Access is one of the best things to look forward to as Microsoft...

More Articles Like This

- Advertisement -spot_img