How to – Add Style to Custom Component in PowerApps Component Framework

Kindly refer the previous post, here we will be adding style to the component created in the post.

https://nishantrana.me/2019/06/06/step-by-step-create-a-very-simple-powerapps-custom-component-to-show-the-guid-of-the-record/

Let us continue with our previous sample component and try adding style to it.

• Open ControlManfiest.Input.xml and specify the CSS file to be referred.

• Uncomment the CSS tag in the manifest and create a new folder named CSS and place the CSS file there.

• Edit the index.ts file and add the class to the label

• Edit the CSS file

• Edit the version number in case of updating the existing control in ControlManifest.Input.xml

• Followed by the build command
• npm run build
  

• After the successful build, we can see the CSS added in the out folder for the component
  

• Run the MSBuild command to generate the new solution zip files
  

• Import the managed solution.
  
• Open any of the existing contact records, we can see the style is applied to the control.

Hope it helps..