Style a PCF using FluentUI – when a Theme is not enough

Inogic wrote two great blogs about defining the colors of PCF (buttons) using Fluent UI Themes: about using FluentUI Theme Designer and about generating the FluentUI Theme programatically. Using Theme is the recommended way. But in my PCF “Dialog Buttons” I wanted to offer the possibility to define colors individually (each button should be able to have different color). There doesn’t make much sense to use the Theme and to overwrite the styles for each button. This blog is about a way to implement it using the generated classNames.

The requirement

The buttons should work similar to the standard buttons. If the PCF is configured to use standard theme, it should reflect the “main Color” from the Dynamics 365 theme. But if the PCF is configured to use individual colors, it should be able to show each button in different color.

It should behave like a standard button: on hover or click on the button, it should get darker.

The implementation

I’m relying on “merge-styles“. It provides utilities to load styles through javascript. It generates css classes, rather than using inline styling. This ensures that we can use pseudo selectors (like :active, :hover, parent/child selectors). This way we can take more styles and generate only one class name. If the same set of styling is passed in, the same name returns and nothing is re-registered. It works similar to JSS (CSS in JS), in case you are familiar with.

So it’s pretty straight forward:

import { mergeStyles } from '@fluentui/react/lib/Styling';

//....
 const className = mergeStyles({
            backgroundColor: color,
            borderColor: color
            }, {   
                selectors: {                 
                ":active": highlightStyle, 
                ":visited": highlightStyle, 
                ":hover": highlightStyle,  
                ":disabled": {  
                    backgroundColor: "transparent",                  
                }   
            }                                                                   
        })

For “:active”, “:hover”, “:visited” I use the same colors, but I need to make them darker, so I use a CSS filter: “brightness(75%)

 const highlightStyle = {
            backgroundColor: color ,                    
            borderColor: color, 
            filter: "brightness(75%)"
        }  

Now I can use this for my Button

<DefaultButton
    ...
    className={className}
/>

That’s it. See the the complete styling code in my github repository

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Connecting to %s

Website Powered by WordPress.com.

Up ↑

%d bloggers like this: