wise-white
wise-white2w 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
kapa.ai2w 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
kapa.ai2w ago
<@579378642958942227> kapa.ai is still learning and improving, please let us know how it did by reacting below