fair-rose•2mo ago
Using Refine with other MUI Layout?
Hi. I am exploring Refine right now. My project is using MUI so I am also exploring @refinedev/mui package.
I am wondering whether I can use other MUI layout component instead of <ThemedLayoutV2> to build my dashboard, while still using other MUI adapters in @refinedev/mui for datagrid, forms, etc., on the actual pages. My understanding is that <ThemedLayoutV2> depends on <Refine> but not the other way around. I am just not sure whether not using the <ThemedLayoutV2> will have any consequence related to using other components in the @refinedev/mui on my page.
To be more specific, I would like to use the <DashboardLayout> in @toolpad/core.
Is there anything I should know before I go this route? Thanks!
2 Replies
Hi @gggdddddd. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
You can use other MUI layout components (such as
<DashboardLayout> from @toolpad/core) instead of <ThemedLayoutV2> in your Refine project. The <ThemedLayoutV2> component is provided for convenience and consistency, but it is not required for using other components from @refinedev/mui like DataGrid, forms, etc. These components are designed to work with the current Material UI theme and do not depend on <ThemedLayoutV2> being present in your layout.
The key requirement is that your app is wrapped with Material UI's <ThemeProvider> and the appropriate theme (such as one from RefineThemes or your own custom theme). This ensures that all MUI-based components, including those from @refinedev/mui, receive the correct theme context and styling. You can see in the documentation that the theme provider is used at the top level, and then you are free to structure your layout as you wish, as long as the theme context is available to the components you use Theming Theming - Passing the Theme to ThemeProvider.
So, you can safely use <DashboardLayout> or any other MUI layout component, and then use @refinedev/mui components within your pages. Just make sure to provide the theme context at the top level. There are no documented consequences or limitations in the knowledge sources regarding this approach.
If you need features like resource-based menu generation, user info in the header, or other conveniences provided by <ThemedLayoutV2>, you would need to implement those yourself or adapt them to your chosen layout. Otherwise, you are free to use your preferred layout structure.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1068416798153789511> Kapa.ai is still learning and improving, please let me know how I did by reacting below.