Override CSS in LWC for Standard Components

Sometimes the looks of Standard Lightning Web Components are not enough and we need to update the look and feel of Standard Lightning Web Components. In this post, we will implement the functionality to override CSS in LWC for Standard Components.

We will implement three ways to override CSS in LWC for Standard Components:

1. By using SLDS Styling Hooks
2. External Sylesheet using Static Resource
3. By creating a style element

Let’s get into the implementation.

Implementation

We will create a sample Lightning Web Component with the lightning-card. We will also display the form to create an Account record using lightning-record-form.

Also Read:

• lightning-record-form in LWC

After we override CSS in LWC for lightning-card and lightning-record-form Standard Components, this is how our output will look:

First, create a sample Lightning Web Component and add lightning-record-form inside lightning-card to allow users to create an Account record.

sample.cmp

<template>
    <lightning-card title="Override CSS in LWC">
        <div class="slds-p-horizontal_small">
        
            <lightning-record-form object-api-name="Account" record-id={strRecordId}
            columns="2" mode="edit" fields={arrayFields}></lightning-record-form>
        </div>
    </lightning-card>
</template>

sample.js

import { LightningElement, api } from 'lwc';

export default class Sample extends LightningElement {
    @api strRecordId;
    arrayFields = ['Name', 'AccountNumber', 'Phone', 'Type', 'Website'];

}

This is how our default component will look:

Now, let’s apply different methods to override CSS in LWC for Standard Components.

Override CSS in LWC using SLDS Styling Hooks

SLDS Styling Hooks are custom CSS Properties used to customize the component styling. Styling Hooks provides CSS custom properties that can be used to apply CSS to SLDS component blueprints and design variations.

Let’s see how it works. We want to update the background color of the card, the border of the card, and the background of the button. All of this is part of lightning-card. We need to check if there are any CSS custom properties for the SLDS component blueprint. In our case, it would be a card component as we are overriding the CSS of lightning-card. You can check the SLDS component blueprint of lightning-card here. You can click on the Styling Hooks Overview on the right bottom to check the available Styling Hooks for the SLDS blueprint of lightning-card. Most of the standard lightning component has its SLDS blueprint which you can find using Salesforce Lightning Design System.

All we have to do is, use those CSS properties and apply them in our CSS file. In our case, we want to change the background and border of the lightning card, along with the color of the button. Get the relevant properties and use lightning-card selector to apply them in the CSS file.

This is how our CSS file would look:

sample.css

lightning-card{
    --sds-c-card-color-background: #aadae9d8;
    --sds-c-card-color-border: #aadae9d8;
    --sds-c-button-brand-color-background: purple;
}

Override CSS in LWC using External Stylesheet

We can use External Stylesheet to override CSS in LWC. Let’s first try to update the CSS of the title of our lightning-card on client-side from the browser.

Right-click on the title of the card and click Inspect. It will take you to the Console. Add simple CSS to change the color of the title. Once it is done. it will update the color of the title on the UI on the client-side.

If you notice the span tag which is used to display the title of the lightning card, it has class slds-text-heading_small applied to it. Use the same class and add it in the sample.css file to change the color with color CSS property. Once you save and refresh the page, it won’t work.

Here comes the external stylesheet. Use the same CSS and add it to the notepad file. Save it as a CSS file. Upload this file as Static Resource. Import this file in Lighting Web Component and load it in the renderedCallback() method. There we go, CSS will be applied to your lightning-card.

Also Read:

• Use Static Resource in LWC (Lightning Web Component)

I have added the below CSS to the external file to update the CSS of the title and apply weight to the field labels of form elements.

sample.css External File uploaded in Static Resource

.slds-text-heading_small {
	color: blue;
}
.slds-form-element__label{
	font-weight: bold;
}

You can get these selectors from the browser console, just like we did for the title of the card earlier.

And this is how our JavaScript file would look after importing CSS from Static Resource and loading it in renderedCallback():

import { LightningElement, api } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import SAMPLE_CSS from '@salesforce/resourceUrl/SampleCSS';

export default class Sample extends LightningElement {
    @api strRecordId;
    arrayFields = ['Name', 'AccountNumber', 'Phone', 'Type', 'Website'];

    renderedCallback() {

        Promise.all([loadStyle(this, SAMPLE_CSS)]);
    }
}

Override CSS in LWC by Creating a Style Element

Use the document.createElement() method to create a style element from JavaScript and apply CSS to the style element. Append the style element to lightning-card. We have to do this in the renderedCallback() method.

Below is the same CSS that we applied to the title of lightning-card and form elements. But this time, we applied it by creating a style element.

sample.css

import { LightningElement, api } from 'lwc';

export default class Sample extends LightningElement {
    @api strRecordId;
    arrayFields = ['Name', 'AccountNumber', 'Phone', 'Type', 'Website'];

    renderedCallback() {
        const style = document.createElement('style');
        style.innerText = `c-sample .slds-text-heading_small {
            color: blue;
        }
        .slds-form-element__label{
            font-weight: bold;
        }`;
        this.template.querySelector('lightning-card').appendChild(style);


    }
}

Also Read:

• Navigation Service in LWC (Lightning Web Component)

That is all from this post, this is how we can Override CSS in LWC for Standard Components. If you don’t want to miss new implementations, please Subscribe here.

Check official documentation here to know more about SLDS Styling Hooks.

See you in the next implementation, thank you!