1

There I times when I want to change the styling of standard Lightning Web Components, such as lightning-button (to change the button colour), lightning-accordion-section (to change the section title font size) or lightning-tree-grid (to change row backgrounds) in order to convey extra information to the user. How can I do this?

1 Answer 1

2

LWCs are based on the Web Component standard and leverage what is called the Shadow DOM in order to hide the internal implementation of the component and prevent the page or component in which they are used from affecting the way they work. This includes preventing CSS defined outside the component from changing the way the component renders. This is covered in the Salesforce documentation:

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

Components can choose to expose features that allow some level of control of their styling and the styling of their content via specific attributes. For example, the lightning-button (and a number of other standard components) supports the "variant" attribute that allows semantic selection of a colour for the button (rather than direct colour specification - by using semantic selection the meanings of specific colours is made consistent across the entire User Experience). The lightning-accordion-section doesn't provide any attributes to control the title text but does allow SLDS style classes to be specified and applied on the section's content using the standard HTML "class" attribute. The lightning-tree-grid (and lightning-datatable) provides more control using the cellAttributes definition for a column, which can set the "class" using an SLDS style class. This can even get that class from a value in the data using a fieldName specification.

The standard components are designed to ensure UX consistency and therefore offer rather limited styling control. What control is available is explicitly stated in the various component specifications and documentation, as available through the Components Reference (be sure to look at the details in the Lightning Web Components section of the documentation, rather than the Aura section since there are subtle differences in capabilities between the two).

If you need to provide more styling or styling control than is available using a standard component it is necessary to implement your own, extended version of that component. The SLDS documentation rather usefully provides "component blueprints" covering the static structure and styling used to create the UI for the various components, though this does not cover any dynamic behaviour which you will have to re-create for yourself.

2

You must log in to answer this question.

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