add custom component to menuItem

[gtolarc]

I wish I could put a custom component in the menuItem. For example, to put a badge to display real-time information from a table. Here is concept ex).

import { MenuItemType } from '@paljs/ui';

const items: MenuItemType[] = [
  { title: 'Home Page', icon: { name: 'home' }, link: { href: '/admin' } },
  {
    title: 'Models',
    icon: { name: 'layers-outline' },
    children: [
      {
        title: 'Users',
        link: { href: '/admin/models/User' } },
        extras: [ // <- this
          { position: 'prefix', component: <Hello /> },
          { position: 'postfix', component: <World /> },
        ],
    ],
  },
];
export default items;

[gtolarc]

It works well, but there is a problem with the arrangement of custom components added in the default css.
Can you add the following css by default?

.menu-item {
  position: relative;
}

[AhmedElywa]

You can add this in your use case just warp the component with styled component and add this to it

[gtolarc]

I'm already using it like that, but wouldn't it be better to apply it by default so that new users don't feel confused?