Style a Component that use union type

[thewebartisan7]

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.

[digitaljohn]

@thewebartisan7 Thanks for raising this... could you please create a test that fails for this scenario?