Skip to main content

Styling

The unstyled Accordion and AccordionItem components render the following HTML markups into DOM.

<!-- Accordion -->
<div class="szh-accordion">
<!-- First AccordionItem -->
<div class="szh-accordion__item">
<h3 class="szh-accordion__item-heading">
<button class="szh-accordion__item-btn">
<!-- AccordionItem `header` prop goes here -->
What is Lorem Ipsum?
</button>
</h3>
<div class="szh-accordion__item-content">
<div role="region" class="szh-accordion__item-panel">
<!-- AccordionItem `children` prop goes here -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>

<!-- Next AccordionItem -->
<!-- ... -->
</div>

Each tag has some global class selectors attached. Depending on the styling system in your project, you may not use those class selectors.

Each tag accepts a className prop which can be used to append custom class selectors. The className prop also supports a function form that receives relevant state as its parameters.

Examples

Please checkout the sandbox examples below for styling with some popular front-end stacks: