How do i change mui authPage content?

I cant change the card content

14 Replies

Hi @nasdamha. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

adverse-sapphire•2y ago

is title suppose to change it?

kapa.ai•2y ago

---------------------- To customize the content of the card in refine, you can use the contentProps property. The usage of contentProps varies depending on the component you are working with. Here are some examples for different components: For Material UI components: - <Create/>: source (https://refine.dev/docs/api-reference/mui/components/basic-views/create)

<Create
  contentProps={{
    sx: {
      backgroundColor: "lightsteelblue",
    },
  }}
>
  <span>Rest of your page here</span>
</Create>

<Create
  contentProps={{
    sx: {
      backgroundColor: "lightsteelblue",
    },
  }}
>
  <span>Rest of your page here</span>
</Create>

- <Edit/>: source (https://refine.dev/docs/api-reference/mui/components/basic-views/edit)

<Edit
  contentProps={{
    sx: {
      backgroundColor: "lightsteelblue",
    },
  }}
>
  <span>Rest of your page here</span>
</Edit>

<Edit
  contentProps={{
    sx: {
      backgroundColor: "lightsteelblue",
    },
  }}
>
  <span>Rest of your page here</span>
</Edit>

For Ant Design components: - <Create/>: source (https://refine.dev/docs/api-reference/antd/components/basic-views/create)

<Create
  contentProps={{
    style: {
      backgroundColor: "cornflowerblue",
      padding: "16px",
    },
  }}
>
  <p>Rest of your page here</p>
</Create>

<Create
  contentProps={{
    style: {
      backgroundColor: "cornflowerblue",
      padding: "16px",
    },
  }}
>
  <p>Rest of your page here</p>
</Create>

- <Edit/>: source (https://refine.dev/docs/api-reference/antd/components/basic-views/edit)

<Edit
  contentProps={{
    style: {
      backgroundColor: "cornflowerblue",
      padding: "16px",
    },
  }}
>
  <p>Rest of your page here</p>
</Edit>

<Edit
  contentProps={{
    style: {
      backgroundColor: "cornflowerblue",
      padding: "16px",
    },
  }}
>
  <p>Rest of your page here</p>
</Edit>

Make sure to replace the component and the contentProps values according to your needs. ---------------------- 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.

Edit | refine

provides us a layout for displaying the page. It does not contain any logic but adds extra functionalities like a .

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.

Edit | refine

`` provides us a layout for displaying the page. It does not contain any logic but adds extra functionalities like a refresh button.

kapa.ai•2y ago

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

adverse-sapphire•2y ago

also headStyle errored @kapa.ai how do i change the title?

kapa.ai•2y ago

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

kapa.ai•2y ago

---------------------- To change the title inside a card in refine, you can use the <Title> component. The usage of <Title> varies depending on the design system you are working with. Here are some examples for different design systems: For Ant Design components: - <Title> component: source (https://refine.dev/docs/advanced-tutorials/custom-layout)

<Title level={4}>Your Custom Title</Title>

<Title level={4}>Your Custom Title</Title>

For Material UI components: - <Typography> component with variant "h4": source (https://refine.dev/docs/api-reference/mui/components/basic-views/create)

<Typography variant="h4">Your Custom Title</Typography>

<Typography variant="h4">Your Custom Title</Typography>

Make sure to replace the title text and the level or variant according to your needs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Custom Layout | refine

refine supports any layout you want with no restrictions and also provides default layouts with its UI packages. You are free to use them or create your own with the help of refine's hooks and components. You can also use the swizzle command to customize the default layouts and adapt them to your needs.

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

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

plain-purple•2y ago

Hey @nasdamha, You can check out our AuthPage documantation here: https://refine.dev/docs/api-reference/mui/components/mui-auth-page/ Also, you can customize with props as well as use the swizzle command. https://refine.dev/docs/packages/documentation/cli/#swizzle

| refine

component from refine is an authentication page that can be used to login, register, forgot password, and update password.

CLI | refine

refine CLI is a command line application that allows you to interact with your refine project and perform some tasks. This includes creating a new resource, managing updates, swizzle components, and runs your project (build, start, dev).

adverse-sapphire•2y ago

i did check the docs, but i cant figure it out havent tried the swizzle thing yet

plain-purple•2y ago

You can use “title” prop of AuthPage to change title like here: https://refine.dev/docs/api-reference/mui/components/mui-auth-page/#title

| refine

component from refine is an authentication page that can be used to login, register, forgot password, and update password.

adverse-sapphire•2y ago

nope, it only changes title above the card, i wanna change "Sign in to your account" text

plain-purple•2y ago

Fot this, you need to use swizzle command.