KAPA

How can I use swizzled auth page, but keep the styling from the normal version? I am using antd

4 Replies

Hi @P4jMepR. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use a swizzled AuthPage while keeping the styling from the normal version in an Ant Design setup, you need to ensure that you are swizzling the correct component from the @refinedev/antd package. Here's a step-by-step guide: 1. Swizzle the Correct Component: Make sure you are swizzling the AuthPage from the @refinedev/antd package. You can do this using the Refine CLI:

    npm run refine swizzle

    npm run refine swizzle

When prompted, select the @refinedev/antd package and then choose the AuthPage component. 2. Ensure Ant Design Components are Used: After swizzling, check the exported component to ensure it uses Ant Design components rather than plain HTML elements. This will help maintain the styling. 3. Customize as Needed: You can now customize the swizzled component as needed. If you want to add custom fields or modify the layout, you can do so while keeping the existing Ant Design styling. 4. Use the Swizzled Component: Replace the default AuthPage with your customized version in your application. If you encounter issues with styling, double-check that the swizzled component is correctly importing and using Ant Design components. This approach should help you maintain the styling while allowing for customization. For more detailed guidance on swizzling and customization, you can refer to the Refine CLI documentation (https://refine.dev/docs/packages/list-of-packages/#swizzle) and the AuthPage documentation (https://refine.dev/docs/ui-integrations/ant-design/components/auth-page/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

extended-salmon•2w ago

Hey @P4jMepR , kapa.ai is now available for free at https://refine.dev/docs! To improve our community interaction on the Refine Discord server and keep our focus on Q&A sharing, we invite you to our website to use kapa.ai.

like-gold•2w ago

Thanks for letting me know :) Cheers