How to use classname on GridList to style it?

[elVengador]

I'm styling GridList, I want to send classes through props and merge with some classes I will define, but the className has 3 possible values:
StyleRenderProps<GridListRenderProps>.className?: string | ((values: GridListRenderProps) => string) | undefined
What should I do when className is (values: GridListRenderProps)=>string, I don't have value with type GridListRenderProps

For now, I have my component in this way:

import {
  GridList as AriaGridList,
  GridListItem as AriaGridListItem,
  GridListItemProps,
  GridListProps,
} from "react-aria-components";


export function GridList<T extends object>({
  children,
  ...props
}: GridListProps<T>) {
  return (
    <AriaGridList
      {...props}
      //   className={composeTailwindRenderProps(
      //     props.className,
      //     "overflow-auto relative border dark:border-zinc-600 rounded-lg"
      //   )}
      className={
        typeof props.className === "string"
          ? twMerge(
              props.className,
              "overflow-auto relative border dark:border-zinc-600 rounded-lg"
            )
          : undefined
      }
    >
      {children}
    </AriaGridList>
  );
}

[snowystinger]

It depends on what you're trying to do. The easiest way would probably be to simplify the accepted types

interface MyInterface extends Omit<GridListProps<T>, 'className'> {
  className?: string
}

Then you don't need to account for people passing in a function. You would still be able to use the function internally though. And since it just returns a string, you can append the props.className to it.

Otherwise, you'd need to chain their call in conditionally and pass it the renderProp argument with as much or as little of those values exposed as well.

[elVengador]

that solves my problem, thank you