quickest-silver•14mo 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

6 Replies

kapa.ai•14mo 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•14mo ago

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

quickest-silver•14mo ago

Is there no other way?

quickest-silver•14mo ago

Could it be that there is just a token spreadoperator missing to apply it?

noble-gold•14mo 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

quickest-silver•14mo 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!