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: