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.

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..


Author: Nishant Rana

I love working in and sharing everything about Microsoft.NET technology !

7 thoughts on “How to – Add Style to Custom Component in PowerApps Component Framework”

  1. Hi Nishant, great blog as always!

    Im currently trying out PCF and on click of a button, I would like to make a Get request by calling an external Api by doing a XMLHttpRequest (jQuery).

    I tried installing jQuery via npm and imported it in the index.ts file. However I’m hit with build error.

    Am I missing out something or doing something wrong? Pl help

    Liked by 1 person

    1. u can use fetch function from the below relative path :

      –>node_modules–>typescript–>lib–>lib.dom.d.ts –>fetch

      fetch(url, {
      method: “GET”, // *GET, POST, PUT, DELETE, etc.
      //mode: “no-cors”, // no-cors, cors, *same-origin
      // cache: ‘no-cache’, // *default, no-cache, reload, force-cache, only-if-cached
      // credentials: ‘same-origin’, // include, *same-origin, omit
      headers: {
      // “Access-Control-Allow-Headers” : “Origin, X-Requested-With, Content-Type, Accept”,
      // “Access-Control-Allow-Methods” : “GET, POST, PATCH, PUT, DELETE, OPTIONS”,
      // “Access-Control-Allow-Origin” : “*”
      // ‘Content-Type’: ‘application/x-www-form-urlencoded’,
      // redirect: ‘follow’, // manual, *follow, error
      // referrer: ‘no-referrer’, // no-referrer, *client
      }).then(data => {

      Hope this is helpful!

      Liked by 1 person

  2. When I do this, the changes are not reflected! I have cleared the cached, tried different browsers, verified the CSS file is in the ZIP, but the changes are not pulled within Dynamics. Any thoughts on this?


Leave a Reply to PradeepPeri Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

My Trial

It is my experience timeline.


Sharing my knowledge and experience about the Microsoft Power Platform.

Arpit Power Guide

a guide to powering up community

Welcome to the Blog & Website of Paul Andrew

Technical Leadership Centred Around the Microsoft Data Platform

Deriving Dynamics 365

Deriving Solutions and features on Power Platform/Dynamics 365

The CRM Ninja

Thoughts & musings from a Dynamics 365 Ninja!

D CRM Explorer

Learn about Microsoft Dynamics CRM Power Platform customization and implementation and other cool stuffs

Stroke // Jonas Rapp

I know pre-stroke. I will improve who I was.

Power Melange

Power Melange By Shalinee

Clavin's Blog

Power Automate - Power Apps - SharePoint Online - Azure - Nintex - K2 - Artificial Intelligence

Sat Sangha Salon

An Inquiry in Being

The Indoencers

The Influencers & Influences of Indian Music

Monika Halan's blog

Hand's-free money management

D365 Demystified

A closer look at Microsoft Dynamics 365.

Microsoft Mate (msftmate) - Andrew Rogers

Experienced consultant primarily focused on Microsoft Dynamics 365 and the Power Platform


Specific topics by Django Lohn on the whole Microsoft365 Stack

Manmit Rahevar's Blog

One Stop Destination for Microsoft Technology Solutions


Naturally Curious

Brian Illand

Power Platform and Dynamics 365

Steve Mordue MVP

A Microsoft Business Applications MVP

Subwoofer 101

Bass defines your home theater

SQLTwins by Nakul Vachhrajani

SQL Server tips and experiences dedicated to my twin daughters.

Everything D365

Discovering Azure DevOps and D365 Business Applications

Tech Wizard

Lets do IT Spells

XRM Tricks (Power Platform & Dynamics CRM )

Power Platform & Dynamics CRM


Mail to for queries and suggestions

Giving back to the community what I have learned

xrm CRM Dynamics

Dynamics CRM Technical & Functional Info

Dynamics 365 Blogs - Explained in unique way

Sometimes you need to look at things from different perspective.

CRM Keeper

Dynamics 365 Customer Engagement, CRM, Microsoft CRM, Dynamics CRM


Step into the world of a Dynamics 365 Consultant

Dianamics PCF Lady

Diana & Dynamics 365 & Power Platform

%d bloggers like this: