rare-sapphire•4mo ago

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

kapa.ai•4mo ago

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:

import { AuthPage } from "@refinedev/antd";  
  
const MyLoginPage = () => {  
 return (  
 <AuthPage  
 type="login"  
 renderContent={(content: React.ReactNode, title: React.ReactNode) => {  
 return (  
 <div  
 style={{  
 display: "flex",  
 flexDirection: "column",  
 justifyContent: "center",  
 alignItems: "center",  
 }}  
 >  
 {title}  
 <h1 style={{ color: "white" }}>Extra Header</h1>  
 {content}  
 <h1 style={{ color: "white" }}>Extra Footer</h1>  
 </div>  
 );  
 }}  
 />  
 );  
};

import { AuthPage } from "@refinedev/antd";  
  
const MyLoginPage = () => {  
 return (  
 <AuthPage  
 type="login"  
 renderContent={(content: React.ReactNode, title: React.ReactNode) => {  
 return (  
 <div  
 style={{  
 display: "flex",  
 flexDirection: "column",  
 justifyContent: "center",  
 alignItems: "center",  
 }}  
 >  
 {title}  
 <h1 style={{ color: "white" }}>Extra Header</h1>  
 {content}  
 <h1 style={{ color: "white" }}>Extra Footer</h1>  
 </div>  
 );  
 }}  
 />  
 );  
};

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: ----------------------

kapa.ai•4mo ago

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

foreign-sapphire•4mo ago

Hey @BlackBearFTW does the exported authpage element uses ant Design components or just html elements?

rare-sapphire•4mo ago

it uses regular html did I swizzle the wrong thing?

foreign-sapphire•4mo ago

I think youre swizzling from the wrong package, looks like the auth page youre selecting is from @refinedev/core

rare-sapphire•4mo ago

yeah I just saw that Ah that fixes it thank you @kapa.ai How could I add custom fields to antd register page

kapa.ai•4mo ago

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:

import { AuthPage, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";

const MyRegisterPage = () => {
  const { formProps } = useForm();

  return (
    <AuthPage
      type="register"
      renderContent={(content: React.ReactNode, title: React.ReactNode) => {
        return (
          <Form {...formProps}>
            {title}
            {content}
            <Form.Item
              label="Custom Field"
              name="customField"
              rules={[{ required: true, message: 'Please input your custom field!' }]}
            >
              <Input />
            </Form.Item>
          </Form>
        );
      }}
    />
  );
};

import { AuthPage, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";

const MyRegisterPage = () => {
  const { formProps } = useForm();

  return (
    <AuthPage
      type="register"
      renderContent={(content: React.ReactNode, title: React.ReactNode) => {
        return (
          <Form {...formProps}>
            {title}
            {content}
            <Form.Item
              label="Custom Field"
              name="customField"
              rules={[{ required: true, message: 'Please input your custom field!' }]}
            >
              <Input />
            </Form.Item>
          </Form>
        );
      }}
    />
  );
};

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: ----------------------

kapa.ai•4mo ago

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