wise-white•2w ago

error unknow

why i follow the Refine AuthPage title to do have the title error of the <ThemedTitleV2 title="My Title" icon={<img src="https://refine.dev/img/logo.png" />} />

2 Replies

kapa.ai•2w ago

Hi @Kenneth Leung. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It looks like you are trying to customize the title of the AuthPage component using the ThemedTitleV2 component in Refine. Based on the provided knowledge sources, here is how you can correctly implement it. First, ensure you are importing the necessary components from the correct package. For example, if you are using Ant Design, you should import from @refinedev/antd. Here is a correct example for Ant Design:

import { AuthPage, ThemedTitleV2 } from "@refinedev/antd";  
  
const MyLoginPage = () => {  
  return (  
    <AuthPage  
      type="login"  
      title={  
        <ThemedTitleV2  
          title="My Title"  
          icon={<img src="<https://refine.dev/img/logo.png"> />}  
        />  
      }  
    />  
  );  
};

import { AuthPage, ThemedTitleV2 } from "@refinedev/antd";  
  
const MyLoginPage = () => {  
  return (  
    <AuthPage  
      type="login"  
      title={  
        <ThemedTitleV2  
          title="My Title"  
          icon={<img src="<https://refine.dev/img/logo.png"> />}  
        />  
      }  
    />  
  );  
};

Make sure you are using the correct imports and the ThemedTitleV2 component as shown in the example. If you are using a different UI framework like Material-UI, Mantine, or Chakra-UI, ensure you are importing from the respective package. For Material-UI:

import { AuthPage, ThemedTitleV2 } from "@refinedev/mui";  
  
const MyLoginPage = () => {  
  return (  
    <AuthPage  
      type="login"  
      title={  
        <ThemedTitleV2  
          title="My Title"  
          icon={<img src="<https://refine.dev/img/logo.png"> />}  
        />  
      }  
    />  
  );  
};

import { AuthPage, ThemedTitleV2 } from "@refinedev/mui";  
  
const MyLoginPage = () => {  
  return (  
    <AuthPage  
      type="login"  
      title={  
        <ThemedTitleV2  
          title="My Title"  
          icon={<img src="<https://refine.dev/img/logo.png"> />}  
        />  
      }  
    />  
  );  
};

For Mantine:

import { AuthPage, ThemedTitleV2 } from "@refinedev/mantine";  
  
const MyLoginPage = () => {  
  return (  
    <AuthPage  
      type="login"  
      title={  
        <ThemedTitleV2  
          title="My Title"  
          icon={<img src="<https://refine.dev/img/logo.png"> />}  
        />  
      }  
    />  
  );  
};

import { AuthPage, ThemedTitleV2 } from "@refinedev/mantine";  
  
const MyLoginPage = () => {  
  return (  
    <AuthPage  
      type="login"  
      title={  
        <ThemedTitleV2  
          title="My Title"  
          icon={<img src="<https://refine.dev/img/logo.png"> />}  
        />  
      }  
    />  
  );  
};

For Chakra-UI:

import { AuthPage, ThemedTitleV2 } from "@refinedev/chakra-ui";  
  
const MyLoginPage = () => {  
  return (  
    <AuthPage  
      type="login"  
      title={  
        <ThemedTitleV2  
          title="My Title"  
          icon={<img src="<https://refine.dev/img/logo.png"> />}  
        />  
      }  
    />  
  );  
};

import { AuthPage, ThemedTitleV2 } from "@refinedev/chakra-ui";  
  
const MyLoginPage = () => {  
  return (  
    <AuthPage  
      type="login"  
      title={  
        <ThemedTitleV2  
          title="My Title"  
          icon={<img src="<https://refine.dev/img/logo.png"> />}  
        />  
      }  
    />  
  );  
};

If you are still encountering errors, please ensure that you have the correct versions of the packages installed and that there are no typos in your code. For more detailed information, you can refer to the official documentation: - Ant Design AuthPage Title (https://refine.dev/docs/ui-integrations/ant-design/components/auth-page/#title) - Material-UI AuthPage Title (https://refine.dev/docs/ui-integrations/material-ui/components/auth-page/#title) - Mantine AuthPage Title (https://refine.dev/docs/ui-integrations/mantine/components/auth-page/#title) - Chakra-UI AuthPage Title (https://refine.dev/docs/ui-integrations/chakra-ui/components/auth-page/#title) If the issue persists, you might want to check the Refine GitHub Discussions (https://github.com/refinedev/refine/discussions) for additional help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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