Base Web Accordion with Panel Example

Accordion.tsx

import * as React from 'react';
import {
  StatelessAccordion,
} from 'baseui/accordion';
import type {
  StatelessAccordionProps,
} from 'baseui/accordion';

export function Accordion(props: StatelessAccordionProps): JSX.Element {
  const {
    children,
    ...otherProps
  } = props;

  return (
    <StatelessAccordion
      overrides={{
        ToggleIcon: {
          style: {
            display: 'none',
          },
        },
      }}
      {...otherProps}
    >
      {children}
    </StatelessAccordion>
  );
}

CustomPanelContent.tsx

import React from 'react';
import { styled } from 'baseui';

const ColumnLayout = styled('div', {
  display: 'flex',
  flexDirection: 'column',
});

function CustomPanelContent(props: any): JSX.Element {
  return (
    <ColumnLayout>
      Lots of content
    </ColumnLayout>
  );
}

export default CustomPanelContent;

CustomPanelContentNotWorking.tsx

import React from 'react';
import { Panel as BasePanel, styled } from 'baseui';

const ColumnLayout = styled('div', {
  display: 'flex',
  flexDirection: 'column',
});

function CustomPanelContentNotWorking(props: any): JSX.Element {
  return (
    <BasePanel
      key='1'
      title="Panel 1"
    >
      <ColumnLayout>
        Lots of content
      </ColumnLayout>
    </BasePanel>
  );
}

export default CustomPanelContentNotWorking;

index.tsx

import React from 'react';
import { Panel as BasePanel } from 'baseui';
import { Accordion as StatelessAccordion } from './Accordion';
import { CustomPanelContent } from './CustomPanelContent';

function CustomAccordion(props): JSX.Element {
  const [expanded, setExpanded] = React.useState<React.Key[]>([]);

  return (
    <StatelessAccordion
      expanded={expanded}
      accordion={false}
      onChange={({ key }) => {
        setExpanded([key]);
      }}
    >
      <BasePanel
        key='1'
        title="Panel 1"
      >
        <CustomPanelContent />
      </BasePanel>
      <CustomPanelContentNotWorking />
    </StatelessAccordion>
  );
}

export default CustomAccordion;