# React Accordion Component Styling

> Learn how to customize the React Accordion component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.

## CSS variables

React Accordion supports CSS variables for easy customization. These variables are set via Sass but allow direct overrides in your stylesheets or inline styles.

```scss
$accordion-tokens: defaults(
  (
    --cui-accordion-padding-x: 1.25rem,
    --cui-accordion-padding-y: 1rem,
    --cui-accordion-header-padding-x: var(--cui-accordion-padding-x),
    --cui-accordion-header-padding-y: var(--cui-accordion-padding-y),
    --cui-accordion-body-padding-x: var(--cui-accordion-padding-x),
    --cui-accordion-body-padding-y: var(--cui-accordion-padding-y),
    --cui-accordion-font-size: var(--cui-body-font-size),
    --cui-accordion-color: var(--cui-fg-body),
    --cui-accordion-bg: var(--cui-bg-body),
    --cui-accordion-transition-property: #{var(--cui-btn-input-action-transition-property), border-radius},
    --cui-accordion-transition-duration: var(--cui-btn-input-transition-duration),
    --cui-accordion-transition-timing: var(--cui-btn-input-transition-timing),
    --cui-accordion-border-color: var(--cui-border-color),
    --cui-accordion-border-width: var(--cui-border-width),
    --cui-accordion-border-radius: var(--cui-radius-7),
    --cui-accordion-gap: var(--cui-spacer-3),
    --cui-accordion-header-color: var(--cui-fg-2),
    --cui-accordion-header-bg: var(--cui-accordion-bg),
    --cui-accordion-header-icon: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>"))},
    --cui-accordion-header-active-icon: #{escape-svg(var(--cui-accordion-header-icon))},
    --cui-accordion-header-icon-width: 1.25rem,
    --cui-accordion-header-icon-color: currentcolor,
    --cui-accordion-header-active-icon-color: currentcolor,
    --cui-accordion-header-icon-transform: rotate(-180deg),
    --cui-accordion-header-icon-transition: transform .2s ease-in-out,
    --cui-accordion-active-color: var(--cui-fg-body),
    --cui-accordion-active-bg: var(--cui-bg-2),
    --cui-accordion-active-border-color: var(--cui-border-color),
    --cui-accordion-content-duration: .35s,
    --cui-accordion-content-easing: ease,
  ),
  $accordion-tokens
);
```

## How to use CSS variables

```jsx
const customVars = {
  '--cui-accordion-color': '#333',
  '--cui-accordion-bg': '#f8f9fa',
}

return <CAccordion style={customVars}>{/* Accordion content */}</CAccordion>
```