lightning-input type="toggle" change label font

Question

Is it possible to do it?

<lightning-input
          class="cxd-toggle__label-medium"
          type="toggle"
          label="Block list"
          checked={relaxedChecked}
          disabled={relaxedDisabled}
          onchange={unlockCheckboxesRelaxed}
        ></lightning-input>

css

        .cxd-toggle__label-medium {
  font-size: 14px;}

wasn't able to find some webhooks

Answer 1

The best practice is to use styling hooks to customize the styles of the lightning-input component, rather than overriding the slds-form-element__label class.

Styling hooks are CSS custom properties that let you change the appearance of base components without affecting their functionality or behaviour.

You can use the :host selector to apply the styling hooks to your component.

For example, to change the font size of the label, you can use the --lwc-formLabelFontSize styling hook:

:host {
--lwc-formLabelFontSize: 14px;
}