CSS-only expando transition, as a React component

Expando.module.scss

:where(.container) {
  --expando-duration: .25s;
  --expando-easing: ease;
  display: grid !important;
  grid-template-rows: 0fr;
  --expando-transition:
    grid-template-rows var(--expando-duration) var(--expando-easing),
    visibility var(--expando-duration);
  transition: var(--expando-transition);
  overflow: hidden;
  visibility: hidden;

  &.isExpanded {
    grid-template-rows: 1fr;
    visibility: visible;
  }
}

.inner {
  min-height: 0;
  box-sizing: border-box;
}

Expando.tsx

import cn from 'classnames';
import { PropsWithChildren } from 'react';
import styles from './Expando.module.scss';

interface Props extends PropsWithChildren {
  className?: string;
  classNameExpanded?: string;
  classNameContent?: string;
  expanded?: boolean;
}

export function Expando({
  className,
  classNameContent,
  classNameExpanded,
  expanded,
  children
}: Props) {
  return <div className={cn(
    className,
    styles.container,
    { [styles.isExpanded]: expanded },
    classNameExpanded && { [classNameExpanded]: expanded },
  )}>
    <div className={styles.inner}>
      <div className={classNameContent}>
        {children}
      </div>
    </div>
  </div>;
}