2

Is it possible to change the lightning-accordion-section label font size, I tried by adding

class="slds-text-heading_medium" It print like below

enter image description here

Play Ground

Expecting to increase the Font Size and bold the text.

<lightning-accordion class="example-accordion"
                         onsectiontoggle={handleToggleSection}
                         active-section-name="B">
        <lightning-accordion-section name="A"  class="slds-text-heading_medium" label="Accordion Title A">
            <lightning-button-menu slot="actions"
                                  alternative-text="Show menu"
                                  icon-size="x-small"
                                  menu-alignment="right">
                <lightning-menu-item value="New" label="Menu Item One"></lightning-menu-item>
                <lightning-menu-item value="Edit" label="Menu Item Two"></lightning-menu-item>
            </lightning-button-menu>
            <p>This is the content area for section A.</p>
            <p>.</p>
            <p>.</p>
            <p>.</p>
            <p>The section height expands to fit your content.</p>
        </lightning-accordion-section>

        <lightning-accordion-section name="B" label="Accordion Title B">
            <p>This is the content area for section B.</p>
            <p>.</p>
            <p>.</p>
            <p>.</p>
            <p>The section height expands to fit your content.</p>
        </lightning-accordion-section>

        <lightning-accordion-section name="C" label="Accordion Title C">
            <p>This is the content area for section C.</p>
            <p>.</p>
            <p>.</p>
            <p>.</p>
            <p>The section height expands to fit your content.</p>
        </lightning-accordion-section>
    </lightning-accordion>

3 Answers 3

4

No. Its not possible as its exposed as only attribute and not as slot and you do not have any other attributes to pass the style.

Note: You can change the style using javascript as static resource but this will be at your own risk as it is not documented and may break at any time with any upgrade.

3

As per @salesforce-sas's answer, you cannot control this styling on the standard LWC component. If you look at the accordion section spec, you see that there are no attributes for controlling styling. The mention of styling in the description relates to styling the content of the section, not the section itself.

It is worth noting that LWC uses Shadow DOM, which isolates the component content from external influence (including CSS).

If you absolutely have to do this (and make your UX inconsistent with other Salesforce pages) then my recommendation is to use the SLDS blueprints and create your own enhanced accordion.

2

Yes you can by using lightning-accordion Styling Hooks, for example refer the below code

.css

.accordionClass{
--sds-c-accordion-heading-font-size:1.5rem;

}

.html

<lightning-accordion allow-multiple-sections-open active-section-name={activeSections} class="accordionClass">

            <lightning-accordion-section name="SelectCustomer" label="Select Customer For Depot Registration">

css applied on lightning-accordion

Refer : https://www.lightningdesignsystem.com/components/accordion/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.