0

I am trying to style the output of a lighting-output-field component.

<div class="slds-grid slds-gutters">
    <div class="slds-grid slds-size_1-of-1">
        <lightning-record-view-form record-id={recordId} object-api-name={sobjectName}>
          <lightning-output-field field-name="Name" variant="label-hidden"></lightning-output-field>
        </lightning-record-view-form>
    </div>
</div>

I have tried a couple of things but they do not seem to change the output style at all

.slds-output-field {
    color: var(--slds-c-output-text-color, blue);
}
lightning-output-field {
    --my-color: red;
    --my-text-weight: bold;
}
.slds-output-field {
    color: var(--my-color);
}

Just looking at the slds and component documentation, I cannot figure out how to do it. The documentation doesn't help when they use only the badge component and internal tokens for examples. Is what I am trying to do even possible?

1 Answer 1

0

As stated in the Lightning Output Field documentation:

This component inherits styling from input (readonly state) in the Lightning Design System.

This means that you only have the styling hooks provided in the documentation for the input component. Unfortunately this means you can style just a few things such as the box shadow, color, radius and spacing of the component with styling hooks.

For a more customizable component, you should use the web standard input element and style it accordingly. Unfortunately this means you'll have to replicate most features that bind that data with your Salesforce data, but I think you can achieve that using hidden inputs and clever JavaScript.

You must log in to answer this question.

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