When I swizzle the authpage, it loses all the styling when using the swizzled version in antd
When I swizzle the authpage (so I can customize register) it just loses all the styling and shows a html form without any styling
8 Replies
Hi @BlackBearFTW. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Swizzling is a feature provided by Refine to override the default components. When you swizzle a component, it's important to note that you're creating a new version of the component, and you'll need to add your own styles or import the necessary styles from the original component.
If you swizzled the
<AuthPage />
component and it lost all its styles, it's likely because the styles are not being imported or included in your swizzled component. You'll need to ensure that you're importing the necessary styles or writing your own to replace them.
Here's an example of how you can customize the <AuthPage />
component with your own styles:
In this example, the renderContent
prop is used to render the form content and the title. You can use this property to render your own content, or change the default content and title that it gives you (source (https://refine.dev/docs/ui-integrations/ant-design/components/auth-page#rendercontent)).
If you're still having trouble, you might want to check the Refine documentation (https://refine.dev/docs) or ask for help in the Refine GitHub repository (https://github.com/refinedev/refine/issues).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below
sensitive-blue•6mo ago
Hey @BlackBearFTW does the exported authpage element uses ant Design components or just html elements?
national-gold•6mo ago
it uses regular html
did I swizzle the wrong thing?
sensitive-blue•6mo ago
I think youre swizzling from the wrong package, looks like the auth page youre selecting is from @refinedev/core
national-gold•6mo ago
yeah
I just saw that
Ah that fixes it
thank you
@kapa.ai How could I add custom fields to antd register page
Let me check the knowledge base for you. One moment! :books:
----------------------
To add custom fields to the Ant Design register page in Refine, you can use the
renderContent
prop of the <AuthPage />
component. This prop allows you to customize the content of the authentication pages.
Here's an example of how you can add a custom field to the register page:
In this example, the renderContent
prop is used to render the form content and the title. The content
prop contains the default fields of the register form, and you can add your custom fields to it. The title
prop contains the title of the form.
Please note that you'll need to handle the data from the custom fields in your authProvider
(source (https://refine.dev/docs/authentication/auth-provider/)).
For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/components/auth-page#rendercontent).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below