How to use a Static Resourse as a custom css file for all your LWC components

-

How can we reuse CSS in LWC from a static resource and be consistent with styling across the application?

In Lightning Web Components (LWC), you can use static resources to store and reference CSS files. Here's a step-by-step guide on how to use a static resource file for CSS in LWC:

1. Create a Static Resource:

In your Salesforce setup, navigate to "Static Resources."

Create a new static resource and upload your CSS file. Make sure the Cache-Control is set to "Public."

2. Retrieve the URL of the Static Resource:

Once your static resource is uploaded, take note of the URL. It will be something like /resource/yourStaticResourceName/css/APP_Styles.

You can find this URL in the Static Resources detail page.

3. Reference the Static Resource in Your LWC Component:

In your LWC component, import the CSS file using the URL you obtained in the previous step.

4. Use the Imported CSS in Your LWC Component:

In your LWC JavaScript file, use the loadStyle function from the lightning/platformResourceLoader module to load the CSS file.

import appStyles from '@salesforce/resourceUrl/APP_Styles';

import { loadStyle } from 'lightning/platformResourceLoader';

connectedCallback() {

   loadStyle(this, appStyles);

}


Here I have created a sample CSS file that covers all the basic styles necessary for your LWC components.

/**

* @description A global stylesheet for EDGE to be used anywhere and everywhere.

@install in LWC:
* If it's not there already, upload this file with the name APP_Styles in Setup > Static Resources > New
* Add the imports to the top of the LWC.js file
* import appStyles from '@salesforce/resourceUrl/APP_Styles';
* import { loadStyle } from 'lightning/platformResourceLoader';
* Load the stylesheet when the component loads:

connectedCallback() {
    loadStyle(this, appStyles);
}

* @install in Aura:
* If it's not there already, upload this file with the name APP_Styles in Setup > Static Resources > New
* <ltng:require styles="{! $Resource. APP_Styles}"/>
*/
:root {
    --app-blue: #0069aa;
    --app-blue-dark: #004B7A;
    --app-orange: #f58025; /* 245, 128, 37 */
    --app-orange-dark: #d16d20; /* 170, 78, 8 */
    --app-white: #ffffff;
    --app-white-dark: #f4f6f9;
    --app-off-white: #DDDBDA;
    --app-secondary-blue: #0096d6;
    --app-secondary-green: #6db33f;
    --app-secondary-grey: #5a6771;
    --app-secondary-red: #d0021b;
    --app-secondary-yellow: #fbb03f;
    --app-tertiary-grey: #a8b7c7;
    --app-dark-grey: #3E3E3C;
    --app-disabled-grey: #9b9b9b;
    --app-disabled-blue: #2e84b9;

    /*Button border attributes */
    --app-btn-border-radius: 4px;
    --app-btn-border-width: 1px;
    --app-btn-border-color: #D8DDE6;

    /*App modal width*/
    --app-modal-width: 500px;
   
}

.app-modal-footer {
    --app-white-dark: #f3f2f2;
}
.app-button-primary {
    Background: var(--app-orange);
    color: var(--app-white);
}
.app-button-primary:hover {
    background: var(--app-orange-dark);
    color: var(--app-white-dark);
}
.app-button-primary:focus {
    background: var(--app-orange-dark);
    color: var(--app-white-dark);
}
.app-button-secondary {
    background: var(--app-blue);
    color: var(--app-white);
}
.app-button-secondary:hover:enabled {
    background: var(--app-blue-dark);
    color: var(--app-white-dark);
}
.app-button-secondary:focus {
    background: var(--app-blue-dark);
    color: var(--app-white-dark);
}

/*NEW STYLES*/

.app-btn-primary {
    border-radius: var(--app-btn-border-radius);
    min-width: 125px;
    height: 32px;
    background: var(--app-orange);
    color: var(--app-white);
    border: none;
}
.app-btn-primary:hover {
    background: var(--app-orange-dark);
    color: var(--app-white);
}
.app-btn-primary:focus {
    background: var(--app-orange-dark);
    color: var(--app-white);
}
.app-btn-primary:disabled {
    background-color: var(--app-disabled-grey);
    color: var(--app-white);
    opacity: .5;
}
.app-btn-secondary {
    border-radius: var(--app-btn-border-radius);
    width: 125px;
    height: 32px;
    background: var(--app-blue);
    color: var(--app-white);
    border: none;
}
.app-btn-secondary:hover {
    background: var(--app-blue-dark);
    color: var(--app-white-dark);
}
.app-btn-secondary:focus {
    background: var(--app-blue-dark);
    color: var(--app-white-dark);
}
.app-btn-secondary:disabled {
    background-color: var(--app-disabled-grey);
    color: var(--app-white);
    opacity: .5;
}
.app-btn-tertiary {
    border: 1px solid var(--app-btn-border-color);
    border-radius: var(--app-btn-border-radius);
    width: 125px;
    height: 32px;
    background: var(--app-white);
    color: var(--app-disabled-blue);
}    
.app-btn-tertiary:hover {
    background: var(--app-white-dark);
    color: var(--app-disabled-blue);
}
.app-btn-tertiary:focus {
    background: var(--app-white-dark);
    color: var(--app-disabled-blue);
}
.app-btn-tertiary:disabled {
    background-color: var(--app-white);
    color: var(--app-tertiary-grey);
}

/*LWC Button Styles (TO BE DEPRECATED)*/

.app-button-primary> button {
    background: var(--app-orange);
    color: var(--app-white);
    border: none;
}  
.app-button-primary> button:hover {
    background: var(--app-orange-dark);
     color: var(--app-white-dark);
    border: none;
}
.app-button-primary > button:focus {
     background: var(--app-orange-dark);
    color: var(--app-white-dark);
    border: none;
}
.app-button-secondary > button {
    background: var(--app-blue);
    color: var(--app-white);
    border: none;
}
.app-button-secondary > button:hover {
    background: var(--app-blue-dark);
    color: var(--app-white-dark);
    border: none;
}
.app-button-secondary > button:focus {
    background: var(--app-blue-dark);
    color: var(--app-white-dark);
    border: none;
}

/*Card Styles*/
/* Card Header find the slds-card header element and add the below class */
.app-card-header {
    background: var(--app-blue);
    color: white;
    padding: 10px !important;
    border-radius: 3px 3px 0px 0px;
}

/*Label Styles*/
.app-read-to-customer{
    height: 21px;
    width: 209px;
    color: #2B2826;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 21px;
    margin-bottom: 15px;
}

/*Modal Styles*/
.app-modal-content-fix-overlay{
    overflow: initial;
    overflow-y: unset;
    }
   
.app-modal-header {
    background: var(--app-white);
    box-shadow: var(--app-off-white);
    color: #080707;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 25px;
    text-align: center;
}  
.app-modal-content {
    color: #4A4A4A;
    font-size: 13px;
    letter-spacing: 0;
    line-height: 17px;
    padding-left: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-right: 50px;
}    
.app-modal-footer {
    background: var(--app-white-dark);
    box-shadow: var(--app-off-white);
}
.app-modal-close-icon{
    margin-bottom: 10px;
}

/*Icon Styles*/

lightning-icon.app-modal-required-disclosure-icon > lightning-primitive-icon > svg {
    fill: var(--app-white);
}
lightning-icon.app-modal-informative-disclosure-icon > lightning-primitive-icon svg {
    fill: var(--app-white);
}
lightning-icon.app-modal-warning-icon > lightning-primitive-icon > svg {
    fill: var(--app-dark-grey);
}
.app-quote-icon{
    background: var(--app-orange);
}
lightning-icon.app-quote-icon > lightning-primitive-icon > svg {
    fill: var(--app-white);
}
   
/*Alert Styles*/

.app-alert {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 30px;
    justify-content: flex-start;
    border-radius: 3px;
    margin-bottom: 30px;
}
.app-alert.required-disclosure {
    background: var(--app-secondary-red);
    color: var(--app-white);
}
.app-alert.informative-disclosure {
    background: var(--app-blue);
    color: var(--app-white);
}
.app-alert.warning {
    background: var(--app-secondary-yellow);
    color: var(--app-dark-grey);
}

Happy coding!

Comments

Post a Comment

Popular posts from this blog

Validate lightning-input Tag using the checkValidity() and reportValidity() methods in LWC

-
Image
checkValidity(): In Lightning Web Components (LWC), the lightning-input component provides the checkValidity() method, which you can use to check the validity of the input field. This method returns a boolean value indicating whether the input satisfies its validation constraints. reportValidity(): In Lightning Web Components (LWC), the lightning-input component provides the reportValidity() method, which you can use to check the validity of the input field and display error messages if needed. This method is particularly useful when you want to show error messages associated with the input field to the user. Please find the below example on how to use these 2 methods to Validate and Display error messages in LWC Create a sample LWC component with 3 lightning-input tags. HTML javascript Explanation: Step 1: use this.template.querySelectorAll('lightning-input'); to select all the required <lightning-Input> you want to validate, this will identify all <lig...
Read more

What are Duplicate Rules and Matching Rules? How to Invoke Duplicate and Matching Rules in Salesforce without performing DML operations?

-
Image
  Definition: 1.        Duplicate rules are configurations that define the conditions under which a record is considered a duplicate. These rules are applied to standard and custom objects in Salesforce. 2.        Matching rules determine how Salesforce identifies duplicate records when new records are created or existing records are updated. They define which fields to compare and the criteria for matching. 3.        Duplicate rules use matching criteria to determine if a new or updated record matches existing records in the Salesforce organization. Matching criteria can include exact matching or more flexible fuzzy matching based on specific fields. Please note that we can only invoke these while performing DML operations like Insert or Update . Duplicate Rule: It’s Corresponding Matching Rule: The Standard Contact Matching Rule criteria:   Blocking or Alerting: Duplicate rul...
Read more