Introduction
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.
<control namespace="KPI" constructor="LinearInputControl" version="0.0.16" display-name-key="Linear Input Control" description-key="" control-type="standard" preview-image="img/preview.png">
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%; }
Solution
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 (
<Stack dir="ltr" id="LinearInputControl">
{/* Child Components */}
</Stack>
)
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%;
}
Conclusion
Hence, we learned how to apply CSS in virtual PCF control.
