How to adjust lightning-accordion-section title CSS in Salesforce Lightning Web Component(LWC)?

How to adjust lightning-accordion-section title CSS in Salesforce Lightning Web Component(LWC)?

Styling hooks can be used to adjust lightning-accordion-section title CSS in Salesforce Lightning Web Component(LWC).

Sample code:

HTML:

<template>
    <div class="slds-box slds-theme--default">
        <lightning-accordion allow-multiple-sections-open>
            <lightning-accordion-section name="A" label="Accordion Title A">
                Testing Accordion
            </lightning-accordion-section>
        </lightning-accordion>
    </div>
</template>

JavaScript:

import { LightningElement } from 'lwc';

export default class LightningAccordion extends LightningElement {}

CSS:

:host {
    --slds-c-accordion-heading-text-color: black;
    --slds-c-accordion-heading-font-size: 1.2rem
  }

JS-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Output:

For additional supported Styling Hooks, check the following
https://www.lightningdesignsystem.com/components/accordion/#Styling-Hooks-Overview

Leave a Reply