0

How do I change the font size, font weight of the text from lightning-output-field ?

<lightning-output-field class="outputFont" field-name="Protocol__c" data-id="trialProtocol"
                                value={trialRecord.Protocol__c} variant="label-hidden" required>
</lightning-output-field>

CSS:

.outputFont {
        font-size: 14px;
        font-weight:bold;
    }

But the CSS is not getting reflected. What is the other way of imposing styles in lightning-output-field?

1

1 Answer 1

5

This is happening because of shadow dom that doesn't let styles of parent leak to its child. In short, you can't change the styles of a component outside of it. Salesforce recently introduced Styling hooks to help developers style base components as they want which are based on the concept of css-variables.

--lwc-inputStaticFontSize & --lwc-inputStaticFontWeight are the hooks for input font-size & font-weight. So, put values of these css variables in your component. And they'll do the magic themselves.

:host{
   --lwc-inputStaticFontSize: 14px;
   --lwc-inputStaticFontWeight: bold;
}

Read more about shadow dom here

4
  • Can you tell on what it is for lightning-output-field? Jan 31, 2022 at 3:48
  • It's the same. lightning-output-field uses a disabled input under the hood. Jan 31, 2022 at 4:54
  • How would you apply this selectively so that only some of the lightning fields are modified? Jan 2 at 17:55
  • 1
    @JeffCallahan You can put it under a css class and add it on the lightning element. Styles in :host are applied to root of the component. Jan 3 at 5:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .