Customize layout components (Sider e.g.) without rewrite them from scratch

[pinale]

is it possible in some way to modify a layout component (the Material UI Sider for example)
using the defautl layout and append or inject some custom elements

For example i'd like to add a separator and others external link under to the Sider resources menu on the left!

avoiding so to use specific hooks to extract what already exists and i need to extend the component (the resources menu for example, to simulate a sort of visual inheritance)

To make this custom Sider i wrote this:
export const MyCustomSider: React.FC<RefineLayoutSiderProps> = (props: RefineLayoutSiderProps) => { console.log("Sider props", props); return ( <div>mycustomsider</div> ) }
I hoped that props would return something to use and extend in my layout, but it doesn't return anything.
In the realworld example i didn't found anything that can help me as well.
I'm missing something? can you give me some tips to achieve my goal?
Maybe, does exist some React pattern to achive this (regardless of Refine) that i don't know

[alicanerdurmaz]

Hi @pinale,
mui-customize-sider-by-using-render-property Is this meet your needs?