ratty-blush•2y ago

Where to modify "refine project" header?

Hi, i'm using MUI inferencer, and i want to modify dashboard title, where can i modify this? so i can put my project name. Thank you

8 Replies

kapa.ai•2y ago

Hi @regnregn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To modify the dashboard title in your refine project using MUI, you can create a custom dashboard page and pass it to the DashboardPage prop of the <Refine> component. Here's an example of how to create a custom dashboard page with your project name as the title:

import React from "react";
import { Typography } from "@mui/material";

const CustomDashboardPage = () => (
  <div>
    <Typography variant="h4">Your Project Name</Typography>
    {/* Add your dashboard content here */}
  </div>
);

const App: React.FC = () => (
  <Refine
    // ...
    DashboardPage={CustomDashboardPage}
  />
);

import React from "react";
import { Typography } from "@mui/material";

const CustomDashboardPage = () => (
  <div>
    <Typography variant="h4">Your Project Name</Typography>
    {/* Add your dashboard content here */}
  </div>
);

const App: React.FC = () => (
  <Refine
    // ...
    DashboardPage={CustomDashboardPage}
  />
);

Replace "Your Project Name" with the desired title for your project. This custom dashboard page will be accessible on the root route, and the dashboard item will appear at the top of the sider menu. Note that the DashboardPage prop is deprecated and only works with the legacy routing system. It will be removed in the next major release. Please create a route for the root page when using the new routing system. Unfortunately, the provided extracts do not contain information about creating a route for the root page with the new routing system. You can refer to the refine documentation for more information on routing: https://refine.dev/docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@336843331416096768> kapa.ai is still learning and improving, please let us how it did by reacting below

ratty-blushOP•2y ago

I still want to use the template and only want to change the title I still want to use the template and only want to change the title @kapa.ai

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books:

kapa.ai•2y ago

---------------------- To change the title of the dashboard page while still using the default template, you can override the title prop of the <Create> component. Here's an example of how to do this:

import { Create } from "@refinedev/mui";
import { Typography } from "@mui/material";

const CreatePage: React.FC = () => {
  return (
    <Create
      title={<Typography variant="h5">Your Project Name</Typography>}
    >
      <span>Rest of your page here</span>
    </Create>
  );
};

import { Create } from "@refinedev/mui";
import { Typography } from "@mui/material";

const CreatePage: React.FC = () => {
  return (
    <Create
      title={<Typography variant="h5">Your Project Name</Typography>}
    >
      <span>Rest of your page here</span>
    </Create>
  );
};

Replace "Your Project Name" with the desired title for your project. This will update the title while keeping the rest of the default template intact. Source: https://refine.dev/docs/api-reference/mui/components/basic-views/create ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Create | refine

`` provides us a layout to display the page. It does not contain any logic but adds extra functionalities like action buttons and giving titles to the page.

kapa.ai•2y ago

<@336843331416096768> kapa.ai is still learning and improving, please let us how it did by reacting below

extended-salmon•2y ago

@regnregn Hi, you can use this https://refine.dev/docs/api-reference/mui/components/mui-themed-layout/#title

ratty-blushOP•2y ago

Thanks for the link!

Where to modify "refine project" header?

Did you find this page helpful?