Can't change title of AuthPage

I tried to change my login page title like this: <AuthPage type="login" title={<h2>Welcome to ...</h2>} formProps={{ initialValues: { email: "demo@refine.dev", password: "demodemo" }, }} /> That's how it says to do it in the doc. But, I received this error: TS2322: Type '{ type: "login"; title: Element; formProps: { initialValues: { email: string; password: string; }; }; }' is not assignable to type 'IntrinsicAttributes & AuthProps'. Property 'title' does not exist on type 'IntrinsicAttributes & { type?: "login" | undefined; providers?: OAuthProvider[] | undefined; loginLink?: ReactNode; registerLink?: ReactNode; forgotPasswordLink?: ReactNode; rememberMe?: ReactNode; } & { ...; } & { ...; }'. Is it normal?
6 Replies
kapa.ai
kapa.ai2y ago
Hey @jayp_digitalartist! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
kapa.ai
kapa.ai2y ago
---------------------- It seems like you're trying to use the title prop directly on the <AuthPage> component, but the correct way to change the title is by using the contentProps prop. Here's an example of how to change the title for the Ant Design-based AuthPage:
const MyLoginPage = () => {
return (
<AuthPage
type="login"
contentProps={{
title: "Login",
headStyle: {
background: "cornflowerblue",
color: "white",
},
bodyStyle: {
background: "#673ab742",
},
}}
/>
);
};
const MyLoginPage = () => {
return (
<AuthPage
type="login"
contentProps={{
title: "Login",
headStyle: {
background: "cornflowerblue",
color: "white",
},
bodyStyle: {
background: "#673ab742",
},
}}
/>
);
};
In this example, the title prop is passed inside the contentProps object. You can modify your code accordingly to change the title of your login page. Source: antd-auth-page (https://refine.dev/docs/api-reference/antd/components/antd-auth-page) ----------------------
| refine
component from refine is an authentication page that can be used to login, register, forgot password, and update password.
kapa.ai
kapa.ai2y ago
<@718190521612501134> kapa.ai is still learning and improving, please let us how it did by reacting below
dependent-tan
dependent-tan2y ago
Hey @jayp_digitalartist, Which UI framework do you use?
absent-sapphire
absent-sapphireOP2y ago
React and Ant-design
dependent-tan
dependent-tan2y ago
You need to pass “title” prop in “contentProps” object