How to make react-aria's Item works with @emotion/react?

[tuananhlai]

Hi everyone,

I have a question regarding using react-aria's <Item> component with @emotion/react. I'm creating a custom item and I want to pass className to this component. As suggested in this answer, I'm overriding Item props with my own like below.

type CustomItemProps = ItemProps & {
  className?: string
}

export const CustomItem = Item as (props: CustomItemProps) => JSX.Element

Here's how I'm using it.

import { Menu } from '@my-component-library/menu';
import { css } from '@emotion/react';

<Menu>
  <CustomItem css={{ color: 'red' }}>Item 1</CustomItem>
  <CustomItem css={{ padding: '8px' }}>Item 2</CustomItem>
</Menu>

However, the snippet above fails to run with the Error: Unknown element <[object Object]> in collection.. The reason is @emotion/react renders a wrapper element around CustomItem and since this element doesn't implement getCollectionNode, it can't be used in a collection.

Does anyone happen to know a good solution to this issue? Thank you in advance for your help. 🙇

[LFDanLu]

Is this menu built with React Aria? If the latter, I'd suggest switching over to React Aria Components, classname is supported there so using frameworks like Tailwind and presumably @emotion/react should be much easier: https://react-spectrum.adobe.com/react-aria/Menu.html#reusable-wrappers.

And just to elaborate on your CustomItem, you'll need to implement getCollectionNode if you want to keep using Item from react-aria. I'd strongly suggest moving over to a React Aria Components implementation though and using MenuItem then, you can always drop down to the hooks level while still using React Aria Components still: https://react-spectrum.adobe.com/react-aria/Menu.html#hooks

[tuananhlai]

Thank you for the answer.

I've verified that React Aria Components's Menu and MenuItem indeed works with @emotion/react css prop. We'll have plan to migrate to this library in the near future.

In the mean time, do you suggest any way to make react-aria Item work with @emotion/react? To elaborate a bit, @emotion/react works by creating a wrapper around components using css prop. So this snippet (<CustomItem css={{ color: 'red' }} />) will become (<EmotionCSSPropInternal><CustomItem /></EmotionCSSPropInternal>). Even though CustomItem works well normally, adding css prop will cause an error.

[LFDanLu]

Oh I see, so you aren't actually rendering anything extra in your CustomItem, Emotion CSS is autogenerating a wrapper element, my mistake. If that is the case, I'm not sure much can be done unfortunately, our old collection API is pretty strict about consuming elements with getCollectionNode only, that lack of wrapper support is actually a big reason why we've pushed for the new collections api for React Aria Components.

[tuananhlai]

Got it! Do we have plan to support React Aria Components collection API for React Aria hooks in the future by any chance?

One more thing, I see that react-aria-components include all components within one package instead of separately like @react-aria/*. Would this affect the application bundle size? 💭

[LFDanLu]

It technically is already supported, the Menu React Aria Component (RAC) passes its collection to useTreeState which is the same collection building hook that a pure React Aria implementation using Item would use. The approach for using RAC and the aria hooks would be to first try the RAC components standalone and then dropdown to the hook level to customize certain parts of the component where needed (e.g. like how the MenuTrigger is customized here).

As for bundle size, the bundler you use will/should do tree shaking to minimize the size but check out #5204 for some more info

[tuananhlai]

Thank you very much for your answer 🙇