+ Start a Discussion
sumedha psumedha p 

Set color for lightning accordion section header

Hello everyone,

I would like to change the color of my lightning accordion section header from white to grey. How can I achieve this?

User-added image
sumedha psumedha p
To be concise, I want the section header to be a different color than the body
Raj VakatiRaj Vakati
Use this styles
 
.THIS .slds-truncate {
    max-width: 100%;
    background: brown !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
''


User-added image
This code is working for me 

Class
public class AccountsWithContact {
    @AuraEnabled
    public static List<Account> getBooksByAllCategories(){
        List<Account> accCons = [Select  Name,(Select FirstName, LastName from Contacts) from Account];
        return accCons;
    } 
    
}
Component
<aura:component controller="AccountsWithContact" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="accList" type="Account[]" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:accordion aura:id="accordion" allowMultipleSectionsOpen="true">
        <aura:iteration items="{!v.accList}" var="acc">
            <lightning:accordionSection name="A" label="{!acc.Name}" >
                <aura:set attribute="body">
                    <table class="slds-table slds-table--bordered slds-table--cell-buffer slds-table--striped slds-max-medium-table--stacked-horizontal"
                           role="grid">
                        <thead>
                            <tr>
                                <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                    Name
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <aura:iteration items="{!acc.Contacts}" var="con">
                                <tr class="slds-hint-parent">
                                    <td role="gridcell" class="slds-cell-wrap">
                                        <div class="">{!con.LastName}</div>
                                    </td>
                                    <td role="gridcell" class="slds-cell-wrap">
                                        <div class="" data-label="Role">{!con.FirstName}</div>
                                    </td>
                                </tr>
                            </aura:iteration>
                        </tbody>
                    </table>
                </aura:set>
            </lightning:accordionSection>
        </aura:iteration>
        
    </lightning:accordion>
    
    
</aura:component>
Component controller 
({
    doInit : function(component, event, helper) {
        var action = component.get("c.getBooksByAllCategories");
        action.setCallback(this, function(a) {
            component.set("v.accList", a.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})
Component styles 
.THIS .slds-truncate {
    max-width: 100%;
    background: brown !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

 
Raj VakatiRaj Vakati
Is its working ?