Pass to another prop instead of className for @emotion/styled

[GZLiew]

export const NavModal = styled(Overlay)`
  ${xw`absolute w-full z-50 top-0 left-0 overflow-y-scroll`}
  min-height: 100vh;
  min-height: -webkit-fill-available;
  background: ${({ theme }) => theme.colors.bodyBackground};
`

I have the following code where instead of passing it down as className to Overlay's props I want it to pass it to another prop is that possible?

[Andarist]

Sorry, but from the given description I'm not exactly sure what you are asking for. We only generate className prop - if you want to pass it to another prop then you can do stuff like:

export const NavModal = styled(({ className, ...props }) => <Overlay {...props} otherProp={className} />)``

[GZLiew]

Sorry, but from the given description I'm not exactly sure what you are asking for. We only generate className prop - if you want to pass it to another prop then you can do stuff like:

export const NavModal = styled(({ className, ...props }) => <Overlay {...props} otherProp={className} />)``

Yes this is the solution I'm looking for. Thanks!