Styling PCF Components with CSS & Responsive Design

1. Linking Styles to Your Component

Every PCF component can have one or more associated CSS files. The standard practice is to create a css folder within your component's directory and place your stylesheet there (e.g., style.css).

To make the framework aware of your stylesheet, you must declare it in the ControlManifest.Input.xml file. This is done within the <resources> node.

<resources>
  <code path="index.ts" order="1"/>
  <css path="css/style.css" order="1" />
  <!-- Other resources like resx files for localization can also be added here -->
</resources>

Once linked, the styles in this file will be loaded along with your component. A crucial best practice is to scope your CSS to prevent it from accidentally affecting the host Model-driven or Canvas App. The easiest way to do this is to add a unique class to your component's root container in index.ts and prefix all your CSS rules with it.

// In index.ts, within your component class
private mainContainer: HTMLDivElement;

public init(context: ComponentFramework.Context<IInputs>, ...): void {
    this.mainContainer = document.createElement("div");
    this.mainContainer.classList.add("my-unique-component-class"); // Scoping class
    // ... rest of your init logic
}

/* In css/style.css */
.my-unique-component-class .my-button {
    background-color: blue;
    color: white;
}

.my-unique-component-class h1 {
    font-size: 24px;
}

2. Achieving Visual Consistency with Modern Theming

A key characteristic of a professional component is its ability to blend seamlessly with the host application's user interface. This means adopting the app's colors, fonts, and control styles. In the Power Platform, this is achieved by aligning with Fluent UI, Microsoft's design system.

The "modern theming" feature allows your PCF components to automatically inherit styling from the host app, ensuring a consistent look and feel, including support for dark mode.

Key Takeaways from Modern Theming:

• Easiest Path (Fluent UI v9): If you build your component using React and Fluent UI v9 controls (the latest version), and declare a dependency on the platform's React libraries, your component will automatically inherit the modern theme. This is the most recommended and future-proof approach.
• Non-Fluent UI: If your component uses plain HTML and CSS, you can still participate in theming. The framework provides access to theme tokens (like colors, fonts, spacing) through context.fluentDesignLanguage. You can then use these tokens as variables in your CSS to style your custom elements.
• Customization: You can also create your own FluentProvider to deliberately override the app's theme for your component, giving you complete control over its appearance.

Let's see a practical example. This short video demonstrates the goal: modifying a custom PCF control to match the look of the out-of-the-box controls.

While copying styles manually works, modern theming and using Fluent UI controls make this process much easier and more robust. Let's look at a more detailed, practical guide.

This article highlights professional-level nuances, such as:

• Using built-in properties like appearance="filled-darker" is a quick way to align with the modern look.
• Disabled controls are styled differently in Model-driven vs. Canvas apps. A truly robust component accounts for this, perhaps with a configuration property as the author suggests.
• Avoid hardcoding colors like #000000. Instead, use theme tokens (e.g., theme.colorNeutralBackground1) so your component adapts correctly to different themes, including dark mode.

3. Mastering Responsive Design

A responsive component looks and works great on any device, from a wide desktop monitor to a narrow phone screen. This is achieved by using flexible layouts that adapt to the available space. Your CSS skills are key here.

This video provides an excellent, concise overview of the core principles of modern responsive web design.

Media Queries vs. Container Queries

For PCF components, there's a concept even more powerful than media queries: Container Queries.

• Media Queries respond to the size of the entire browser window (the viewport).
• Container Queries respond to the size of the component's immediate parent container.

Since you don't know where your PCF component will be placed—it could be in a wide main section or a narrow sidebar—reacting to its own container size is far more reliable and makes the component truly modular.

To use a container query, you first need to designate an element as a "query container." Then, you can write @container rules that apply styles when that container meets certain size criteria.

/* Designate the component's main div as a container */
.my-unique-component-class {
  container-type: inline-size;
  container-name: my-component;
}

/* Default styles (for wider containers) */
.my-unique-component-class .card-layout {
  display: flex;
  flex-direction: row; /* Side-by-side */
  gap: 16px;
}

/* Styles for when the container is narrow */
@container my-component (max-width: 400px) {
  .my-unique-component-class .card-layout {
    flex-direction: column; /* Stack vertically */
  }
}

4. Testing Your Responsive Component

The PCF local test harness is designed for testing responsiveness. It allows you to manually set the width and height of the component's container and see how it reacts in real-time.

Your updateView method also receives the available space via the context.mode.allocatedWidth and context.mode.allocatedHeight properties. While you can use these to make programmatic changes in TypeScript, it is generally considered a best practice to handle responsive layouts with CSS (using Flexbox, Grid, and Container Queries) whenever possible, as it is more performant and declarative.

Conclusion

You've now covered the essential skills to make your PCF components not just functional, but also visually integrated and professionally polished.

Key Takeaways:

• Link your CSS in the ControlManifest.Input.xml and use scoping to avoid style conflicts.
• Leverage Fluent UI and modern theming to create components that automatically match the look and feel of Power Apps.
• Use properties like appearance and theme tokens instead of hardcoded values for robust styling.
• Master responsive layouts with Flexbox for one-dimensional flow and CSS Grid for two-dimensional structures.
• Prefer Container Queries over Media Queries for building truly modular, reusable components.
• Test your responsive designs effectively using the local test harness.

What's Next?

We've now touched on building the component's structure, interacting with data, and styling the UI. In the next lesson, we will focus on the development workflow itself. We'll take a deep dive into how to build, test, and debug PCF components locally using the local test harness, ensuring you have an efficient and productive development cycle.