Customising Edit

how can I Customising Edit page, like removing the save button and chaging the headers ?

2 Replies

Hi @koop_g. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To customize the Edit page in refine, including removing the save button and changing the headers, you have several options. Here's how you can achieve this: 1. Removing the save button: You can use the footerButtons prop to customize the buttons at the footer of the Edit component. By providing a custom render function, you can omit the save button:

import { Edit } from "@refinedev/mui";

const PostEdit: React.FC = () => {
  return (
    <Edit
      footerButtons={({ deleteButtonProps }) => (
        <>
          {deleteButtonProps && (
            <DeleteButton {...deleteButtonProps} />
          )}
        </>
      )}
    >
      <p>Rest of your page here</p>
    </Edit>
  );
};

import { Edit } from "@refinedev/mui";

const PostEdit: React.FC = () => {
  return (
    <Edit
      footerButtons={({ deleteButtonProps }) => (
        <>
          {deleteButtonProps && (
            <DeleteButton {...deleteButtonProps} />
          )}
        </>
      )}
    >
      <p>Rest of your page here</p>
    </Edit>
  );
};

2. Changing the headers: You can customize the header of the Edit component using the headerProps property:

import { Edit } from "@refinedev/mui";

const PostEdit: React.FC = () => {
  return (
    <Edit
      headerProps={{
        sx: {
          backgroundColor: "lightsteelblue",
        },
      }}
    >
      <span>Rest of your page here</span>
    </Edit>
  );
};

import { Edit } from "@refinedev/mui";

const PostEdit: React.FC = () => {
  return (
    <Edit
      headerProps={{
        sx: {
          backgroundColor: "lightsteelblue",
        },
      }}
    >
      <span>Rest of your page here</span>
    </Edit>
  );
};

You can also customize the title of the Edit component:

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

const PostEdit: React.FC = () => {
  return (
    <Edit title={<Typography variant="h5">Custom Title</Typography>}>
      <p>Rest of your page here</p>
    </Edit>
  );
};

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

const PostEdit: React.FC = () => {
  return (
    <Edit title={<Typography variant="h5">Custom Title</Typography>}>
      <p>Rest of your page here</p>
    </Edit>
  );
};

These customizations allow you to remove the save button and change the headers of the Edit page. You can find more detailed information and options in the following documentation: - Edit Component Properties (Material-UI) - Footer Buttons Customization (Material-UI) - Header Props Customization (Material-UI) Remember that the exact implementation might vary slightly depending on the UI framework you're using with refine (e.g., Material-UI, Mantine, Chakra UI, etc.). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1327562833537400895> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Customising Edit

Did you find this page helpful?