Overriding the LWC standard component’s style

As we all know that LWC uses shadow DOM which makes an isolation between our custom components and LWC standard components. When you add a style to your component’s css file it doesn’t apply to the standard components and that’s a limitation.

Example: Let’s say you have a lightning-textarea and you want to set the min-height style to control it’s height then adding the style to it’s parent component’s CSS file will not help you due to shadow DOM style. The only workaround for this as follows.

Upload all the CSS in a static resource file and load that resource in your the parent component.

<template>
    <div class="my-section slds-m-left_x-small">
        Details:
        <lightning-textarea class="my-text-area"></lightning-textarea>
        <lightning-button variant="brand" label="Save" class="custom-button"></lightning-button>
    </div>
</template>

import { LightningElement, track } from 'lwc';
export default class App extends LightningElement {
}

.my-section .my-text-area {
    min-height: 500px;
}
.my-section .custom-button {
    background:rgb(245, 133, 5);
}

When you try above style then it won’t be reflected on the component and to overcome such limitation, you need to move the css to a Static Resource file and load that style file in the component.

import { LightningElement, track } from 'lwc';
import customStyle from '@salesforce/resourceUrl/customStyle';
import { loadStyle } from 'lightning/platformResourceLoader';
export default class App extends LightningElement {
    renderedCallback() {
        Promise.all([
            loadStyle(this, customStyle)
        ])
    }
}