slds-form-element__label not able to override

Question

I'm trying to override the default styling of the lightning-input label

I have done below code in css

.slds-form-element__label{
font-size: 0.9rem !important;
font-weight:500 !important;

}

I refreshed the page, logged in logged out multiple time, code is updated in for sure. what and I doing wrong here?

Answer 1

Due to LWC's Shadow DOM you cannot override those values using only the class name.

CSS styles defined in a parent component don’t leak into a child

SLDS allows to override them via styling hooks. A lot of properties are setted using var() function, which get a custom property name as first parameter and a fallback (default) value.
I.E. font-size: var(--lwc-formLabelFontSize, 0.75rem);.

As you can see from the browser's console, the font-size of that label is setted using --lwc-formLabelFontSize property. Since the element that contains that combobox already have a custom css class (statusFilter), you could add the following rule into the css file:

:host .statusFilter {
    --lwc-formLabelFontSize: .9rem;
}

---

Since the standard label has no font-weight configurable property, you could set lightning-input's variant attribute to label-hidden and create your own HTML element, thus you'll be able to set every css property you need.

Answer 2

.You cannot override it using that selector only. You will have to be much more specific in order to override it, for example:

.containerInstanceClass div.className > div.otehrclass > div.slds-form-element__label

However, I strongly discourage you of using the !important flag in css, as it is not considered a best practice.

Instead of using the slds selector to override the class, add your own class name to the element to scope accordingly.

and if you are using a lightning namespace component, the above wont work due to Shadow DOM. View @RubenDG 's answer for using hooks