5: Inject External CSS in Modern UI

Before we applied branding using Microsoft Theme Generator.

Now we are going to Inject our custom CSS in DOM using Application Customizer.

5: Inject External CSS in Modern UI

If you are familiar with Application Customizer, it only provides two placeholders Header and Bottom but if you want to override UI of Navigation than? 

Because till now Microsoft didn’t announce new placeholders. So only option available is to inject CSS in DOM. Ok let’s referenced our previously developed extension.

5.1: Create External CSS to update navigation UI

You can use inspect element to get ID or class of element on which you want to apply your customized CSS.
1: Create external CSS file customcss.css
2: Paste your CSS, I am using following CSS

a.ms-HorizontalNavItem-link.is-not-selected:hover,

a.ms-HorizontalNavItem-link.is-selected:hover {

    color: #196586;

    background: rgba(0, 0, 0, 0.05);

}

a.ms-HorizontalNavItem-link.is-not-selected, a.ms-HorizontalNavItem-link.is-selected {

    border: 0;

    display: block;

    padding: 10px 15px;

    font-size: 18px;

}

[dir='ltr'] .ms-HorizontalNavItem:not(:last-child) {

    margin-right: 8px !important;

}

[data-automationid="SiteHeader"] {

    height: 88px!important;

    /* padding-top: 15px; */

}

button#HorizontalNav3EditLink {

    display: none;

    padding: 10px;

}

.linkSelected-97 {

    color: #196586;

}

a.ms-HorizontalNavItem-link.is-selected {

    color: #196485;

}

a.ms-HorizontalNavItem-link.is-selected {

    background: #e8e8e8;

}

3: Upload CSS in site assets/ style library of your site collection. 

5.2: Inject CSS in DOM using available Placeholders Header
and Bottom

1:Open your visual studio code where you developed Spfx Application Customizer.

2: Define Variable in your ts file like this for new property:

cssurl: string;

3: Open your server.json and add reference your customcss.css in “cssurl” property

4: Render/load Customcss in your ts file. Load Css in application customizer _renderPlaceHolders(); function:

let customCssString: string = this.properties.cssurl;

    if (!customCssString) {

      console.error('Custom CSS URL was not defined.');

    }

    console.log(customCssString);

    if (customCssString) {

      // inject the style sheet

      const head: any = document.getElementsByTagName("head")[0] || document.documentElement;

      console.log(head);

      let customStyle: HTMLLinkElement = document.createElement("link");

      customStyle.href = customCssString;

      customStyle.rel = "stylesheet";

      customStyle.type = "text/css";

      head.insertAdjacentElement("beforeEnd", customStyle);

    }

For your reference:

Save all your changes and run gulp serve in node command prompt.

6: Copy the URL in paste in browser:

Before customcss.css Navigation looks:

After customcss.css Navigation looks:

As you can see in query string properties we have to pass like Logo and Custom CSS but after deployment you don't need to pass lets Deploy your achievement with custom injected CSS.

Next 6: Configuration of CDN for spfx Extension Deployment

Thanks Best Of Luck. If you stuck somewhere please feel free to ask in Comment. #SharingIsCaring