frail-apricot
frail-apricot17mo ago

How do i change mui authPage content?

I cant change the card content
No description
14 Replies
kapa.ai
kapa.ai17mo ago
Hi @nasdamha. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
frail-apricot
frail-apricot17mo ago
No description
frail-apricot
frail-apricot17mo ago
is title suppose to change it?
kapa.ai
kapa.ai17mo 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
kapa.ai17mo ago
<@452628900569415681> kapa.ai is still learning and improving, please let us how it did by reacting below
frail-apricot
frail-apricot17mo ago
also headStyle errored @kapa.ai how do i change the title?
kapa.ai
kapa.ai17mo ago
Let me check the knowledge base for you again. One moment! :books:
kapa.ai
kapa.ai17mo 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
kapa.ai17mo ago
<@452628900569415681> kapa.ai is still learning and improving, please let us how it did by reacting below
foreign-sapphire
foreign-sapphire17mo 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).
frail-apricot
frail-apricot17mo ago
i did check the docs, but i cant figure it out havent tried the swizzle thing yet
foreign-sapphire
foreign-sapphire17mo 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.
frail-apricot
frail-apricot17mo ago
nope, it only changes title above the card, i wanna change "Sign in to your account" text
No description
foreign-sapphire
foreign-sapphire17mo ago
Fot this, you need to use swizzle command.