0

I'm trying to add border-radius property to lightning-accordion-section header but the following syntax seems to work with background color but not with border radius. What is the right combination of css styling here?

.accLabel
{
    --slds-c-accordion-summary-color-background : rgb(243,243,243);
    --slds-c-accordion-summary-radius-border : 0.5rem;
}

LWC html

<lightning-accordion active-section-name="alwaysOpen">
    <lightning-accordion-section name="alwaysOpen" label="Description" class="accLabel">
    </lightning-accordion-section>
</lightning-accordion>

1 Answer 1

1

You can only use the hooks that are defined for a component. For lightning-accordion, your options currently are:

Category Hook Name Value Type Fallback Value
Color --slds-c-accordion-color-border Color #e5e5e5
Color --slds-c-accordion-heading-text-color Color #181818
Color --slds-c-accordion-summary-color-background Color transparent
Font --slds-c-accordion-heading-font-size Dimension 1rem
Sizing --slds-c-accordion-sizing-border Dimension 1px
Spacing --slds-c-accordion-section-spacing-block-end Dimension 0.75rem
Spacing --slds-c-accordion-section-spacing-block-start Dimension 0.75rem
Spacing --slds-c-accordion-section-spacing-inline-end Dimension 0.75rem
Spacing --slds-c-accordion-section-spacing-inline-start Dimension 0.75rem
Text --slds-c-accordion-heading-line-height Number 1.25

Because you can't "reach in" to modify the contents of a component directly, you can't actually do what you're trying to accomplish with out of the box style hooks or any combination of CSS.

If you really want to do this, you're stuck writing a custom component.

Conceptually, you could try just pulling out the pieces you need from lightning-base-components. I did some research on this, and well, it's a lot of code to dig through. If you care about 100% replicating the functionality, you should be able to pull out what you need with some effort, probably a few hours. I'll leave it up to you to decide if the amount of effort you'd have to put in would be worth it just to achieve rounded borders.

You could also just copy-paste the blueprint and customize it as you desire. There's really not a lot of JavaScript involved to make a minimally viable version.

Finally, you might look to open-source solutions. I didn't find any that are LWC, just Aura, but you might want to do further research on the topic.

1
  • It was more of a curiosity question. With 0.25rem, users don't even notice rounded corners. Thanks for the answer, huge fan of your contributions :)
    – sam_s
    Jul 29, 2022 at 22:07

You must log in to answer this question.

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