flat-fuchsia
flat-fuchsia12mo ago

ConfigProvider ant design

I am still struggeling to customize the ant design button on the login page by adding a provider config. I have a config (see screenshot one) Where as primary is color blue. however on the login page I still have this hover effect (so first transparent (screenshot 2, then I hover over it, then it becomes blue (screenshot 3). I use the build in AuthPage component (screenshot 4) I would really appreciate any help. I tried a lot of things, best would be to even jump in a 10 min session togehter if possible
No description
No description
No description
No description
6 Replies
kapa.ai
kapa.ai12mo ago
Hi @thejorge4666. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information extracts provided, I can guide you on how to customize the Ant Design button on the login page using the <AuthPage> component. However, I cannot see the screenshots you mentioned, so I'll provide a general solution. To customize the button on the login page, you can create a custom login component and pass it to the LoginPage property of the <Refine> component. Here's an example of how to do this: 1. Create a custom login component, for example, MyLoginPage:
import { AuthPage } from "@refinedev/antd";
import { Button } from "antd";

const MyLoginPage = () => {
return (
<AuthPage
type="login"
renderButton={(props) => (
<Button
{...props}
style={{
backgroundColor: "blue", // Customize the button's background color
borderColor: "blue", // Customize the button's border color
}}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = "blue"; // Customize the hover background color
e.currentTarget.style.borderColor = "blue"; // Customize the hover border color
}}
>
Sign in
</Button>
)}
/>
);
};
import { AuthPage } from "@refinedev/antd";
import { Button } from "antd";

const MyLoginPage = () => {
return (
<AuthPage
type="login"
renderButton={(props) => (
<Button
{...props}
style={{
backgroundColor: "blue", // Customize the button's background color
borderColor: "blue", // Customize the button's border color
}}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = "blue"; // Customize the hover background color
e.currentTarget.style.borderColor = "blue"; // Customize the hover border color
}}
>
Sign in
</Button>
)}
/>
);
};
2. Pass the custom login component to the LoginPage property of the <Refine> component:
import { Refine } from "@refinedev/core";

const App: React.FC = () => (
<Refine
// ...
LoginPage={MyLoginPage}
/>
);
import { Refine } from "@refinedev/core";

const App: React.FC = () => (
<Refine
// ...
LoginPage={MyLoginPage}
/>
);
This example demonstrates how to customize the button's background color, border color, and hover effect. You can adjust the styles according to your needs. For more information on customizing the <AuthPage> component, you can refer to the documentation (https://refine.dev/docs/tutorial/understanding-authprovider/headless/auth-pages#customizing-auth-pages). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai12mo ago
<@897927276304416769> kapa.ai is still learning and improving, please let us how it did by reacting below
flat-fuchsia
flat-fuchsia12mo ago
Is there no other way?
flat-fuchsia
flat-fuchsia12mo ago
Could it be that there is just a token spreadoperator missing to apply it?
No description
optimistic-gold
optimistic-gold12mo ago
Are you sure the <ConfigProvider> wrap you auth pages? You don't need pass anything to your antd components in your <ConfigProvider>. If the antd component inside the provider, all of your styles is applied. Dark/light mode may be occurs the problem
flat-fuchsia
flat-fuchsia12mo ago
Got it, apparently my tailwind is overwritting automatically this button classes. For anyone who is facing a similar issue make sure to adjust your tailwind config useing corePlugins: { preflight: false, // <== disable this! }, in your tailwind.config.js Thanks @salihozdemir for getting on this!