Share Styles (CSS) between LWC

by

In this post, we will implement the functionality to Share Styles (CSS) between (LWC) Lightning Web Components. Usually, we have to create a CSS file in the Lightning Web Component bundle and hence each Lightning Web Component has its own CSS file. If the CSS file can be shared among the components, we can put the reusable code in one CSS file. Then this file can be included in other components to get the styles.

As of now, there is no way of Sharing Styles (CSS) between (LWC) Lightning Web Components. The good news is that it will be possible after the Summer ’20 release. Hence if you are reading this post before 18th July 2020, we can only test this feature in Salesforce Pre-release Summer 2020 org. Click this link to sign up for your Pre-release org to test the Summer ’20 features. Now, let’s hop into the good stuff.

Implementation

First, we will create a style component and then add all the CSS properties. Then we have to include this style component in another lightning web component to apply the CSS properties.

Create a component stylesCmp which we will use as a Reusable style component. Delete HTML and JS file and create CSS file stylesCmp.css for stylesCmp. The name of the CSS file should match the name of the component bundle.

stylesCmp.css

.custom-card{
    background-color: white;
    width:100%;
    padding: 15px;
}

.custom-card-title{
    font-weight: bold;
    font-size: 20px;
    padding-bottom: 15px;
}

.custom-card-desc{
    color: #15388a;
    font-size: 15px;
}

.custom-card-subtitle{
    font-size: 15px;
    padding-left: 10px;
    display: inline;
    color: red;
}

Now, create a sampleCmp which will have the markup to display a custom card with the title and body of the card. And apply the CSS defined in stylesCmp to the sampleCmp markup. In our example, we have created class properties, so apply the classes to required tags.

sampleCmp.html

<template>
    <div class="custom-card">

        <div class="custom-card-title">Sharing Styles between Lightning Web Components
            <p class="custom-card-subtitle">Latest Summer '20 Feature</p>
        </div>
        <p class="custom-card-desc">
            This is a Custom Card component. Lightning Web Component <strong>stylesCmp</strong> has all the common 
            CSS and this component is using the CSS defined in <strong>stylesCmp</strong>. Check the post for the 
            implementation of Sharing Styles between Lightning Web Components.
        </p>
    </div>

</template>

Finally, we need to import our style component stylesCmp in sampleCmp. To do this, create a CSS file sampleCmp.css for sampleCmp component and add the below line:

sampleCmp.css

@import "c/stylesCmp";

where c is the default namespace and styleCmp is the name of the style component we created.

Sharing Styles between Lightning Web Components

This is how our implementation looks:

how to share style components in LWC
Share Styles between Lightning Web Components

This is how we can implement the functionality to Share Styles (CSS) between (LWC) Lightning Web Components.

Click here to check more Implementions using Lightning Web Components.

If you don’t want to miss new posts, please Subscribe here. Thanks !

Leave a Comment