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

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

Apex Best Practices

-
Image
Apex Best Practices: 1. All constants should have uppercase names, with logical sections of the name separated by  underscores. 2. Always check the returned values from Database.delete(), Database.emptyRecycleBin(),                    Database.insert(), Database.undelete(), Database.update() and Database.upsert() calls. If a list is passed to any of these methods, the call will return an array[] of results; the apex code must check all the return values in the returned array of results.  3. Classes that contain methods or variables defined with the webService keyword must be declared as global. 4. Declare instance variable as private or protected. 5. Declare only one variable per line of code. 6. Define meaningful numbers using clearly named constants (static final). 7. Do not instantiate any object before you actually need them. Specifically outside a try-catch block. 8. Each method name should have meaningful names start...
Read more

LWC Best Practices

-
1. Use the Lightning Data Service or cache data whenever possible 2. Before making a call to the server, make sure there's no other option to obtain the data 3. Consider passing data between components using attributes, events, or methods rather than retrieving the same data in different components 4. If multiple components on a given page retrieve the same data, consider creating a service component that has no UI elements and can query data once so that it can pass data on to other components. 5. Only SELECT the fields you need. 6. Set a LIMIT on the query, don't return huge numbers of rows at once 7. Implement pagination when queries may have large result sets. 8. Don't preload data that the user may never need 9. Put the least accessed components in a secondary tab that the user may not click. 10. Don't make a call to the server to filter or sort data you already have at the client side. JavaScript Arrays have built-in functions to do things like sort, filter, and f...
Read more