Style a Component that use union type

Considering below types of Radix UI Accordion, where there is type single or multiple, and when is single we have also collapsible

export interface AccordionSingleProps extends AccordionImplSingleProps {
    type: 'single';
}
export interface AccordionMultipleProps extends AccordionImplMultipleProps {
    type: 'multiple';
}

export const Accordion: React.ForwardRefExoticComponent<(AccordionSingleProps | AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;

interface AccordionImplSingleProps extends AccordionImplProps {
    /**
     * The controlled stateful value of the accordion item whose content is expanded.
     */
    value?: string;
    /**
     * The value of the item whose content is expanded when the accordion is initially rendered. Use
     * `defaultValue` if you do not need to control the state of an accordion.
     */
    defaultValue?: string;
    /**
     * The callback that fires when the state of the accordion changes.
     */
    onValueChange?(value: string): void;
    /**
     * Whether an accordion item can be collapsed after it has been opened.
     * @default false
     */
    collapsible?: boolean;
}
interface AccordionImplMultipleProps extends AccordionImplProps {
    /**
     * The controlled stateful value of the accordion items whose contents are expanded.
     */
    value?: string[];
    /**
     * The value of the items whose contents are expanded when the accordion is initially rendered. Use
     * `defaultValue` if you do not need to control the state of an accordion.
     */
    defaultValue?: string[];
    /**
     * The callback that fires when the state of the accordion changes.
     */
    onValueChange?(value: string[]): void;
}

When I style it with:

export const AccordionRoot = styled(Accordion.Root, {
  css: style.AccordionRoot
})

Then the collpasible prop are undefined.

As workaround I have to:

export const AccordionRoot = React.forwardRef<ElementRef<typeof Accordion.Root>, ComponentPropsWithoutRef<typeof Accordion.Root> & VariantProps<typeof Styled.AccordionRoot>>((props, ref) => (
  <Styled.AccordionRoot
    {...props}
    ref={ref}
  />
))

Then it works fine.

I would like to know if there is a way to avoid this.

All others props so far worked fine, but not in this case.

phantomstudios / css-components

Style a Component that use union type #30