Modal confirm is in white color in dark theme

[Khadhiri786]

Reproduction link

Steps to reproduce

#38671 (comment)

What is expected?

Modal, Notification and Message popups should display with black background in dark mode.

What is actually happening?

These popup's background is displaying with white background in dark theme. If we use hooks from App we are getting error message as shown below.

Environment	Info
antd	5.1.7
React	18.2.0
System	Windows
Browser	Chrome

Screenshots:

[github-actions]

You may look for issues:

1. 56% Static Modal: dark theme is not applied #40509
2. 56% [Input.Group] White border present in dark mode #38954
3. 53% Custom theme variable not used in confirm modal #40275
4. 51% Ant Design Theme Editor theme upload #39620

_{🤖 By issues-similarity-analysis}

[Khadhiri786]

None of the above links are helpful to the mentioned issue.

[Khadhiri786]

@afc163

[Yuiai01]

@Khadhiri786 Hello, The App component should be used by wrapping your component like this.

const MyApp: React.FC = () => (
  <App>
    <ButtonComponent/>
  </App>
);

[Khadhiri786]

@Yuiai01 I have tried, it's not working. Refer below codesandbox link
https://codesandbox.io/s/antd-reproduction-template-forked-rr55gu?file=/index.js

[Yuiai01]

@Yuiai01 I have tried, it's not working. Refer below codesandbox link https://codesandbox.io/s/antd-reproduction-template-forked-rr55gu?file=/index.js

I can work normally in this link you provided.

[Yuiai01]

@Khadhiri786 You can change the theme like I did. https://codesandbox.io/s/dark-theme-tmg8u9

[Yuiai01]

@Khadhiri786 This link might help you, too. https://ant.design/components/app#sequence-with-configprovider 😁

[Wxh16144]

I have the impression of having commented on a similar issue before, here.

In the reproduction address you provided, I found two problems.

1. You need to place the <App /> component provided by antd inside the <ConfigProvider /> component.

import { ConfigProvider, App } from "antd";

const root = createRoot(document.getElementById("root"));
root.render(
  <ConfigProvider>
    <App>{/** Use App.useApp here */}</App>
  </ConfigProvider>
);

2. you need to use the useApp hook in the <App /> wrapped component.

const My = () => {
  const { message } = App.useApp();

  return (
    <Button
      onClick={() => {
        message.success("Clicked");
      }}
    >
      Click Here
    </Button>
  );
};

Toggle full code

import React from "react";
import { createRoot } from "react-dom/client";
import { ConfigProvider, theme, App, Button } from "antd";
import "antd/dist/reset.css";
import "./index.css";

const ButtonComponent = () => {
  const { message } = App.useApp();

  return (
    <Button
      onClick={() => {
        message.success("Clicked");
      }}
    >
      Click Here
    </Button>
  );
};

const root = createRoot(document.getElementById("root"));
root.render(
  <div className="App">
    <ConfigProvider
      theme={{
        algorithm: theme.darkAlgorithm,
      }}
    >
      <App>
        <ButtonComponent />
      </App>
    </ConfigProvider>
  </div>
);

Hope my answer can help you (I rely on translation software to communicate with you in

[Khadhiri786]

@Wxh16144 do you have any idea about class component in react.
Please refer below codesandbox link
https://codesandbox.io/s/antd-reproduction-template-forked-rr55gu?file=/index.js

[Wxh16144]

@Wxh16144 do you have any idea about class component in react. Please refer below codesandbox link https://codesandbox.io/s/antd-reproduction-template-forked-rr55gu?file=/index.js

I'm not familiar with class components, so I guess what you might want to know is how the HOC is handled. Here is a link
https://codesandbox.io/s/antd-reproduction-template-forked-e3h1nz?file=/index.js

[lriho]

We faced a similar issue with notifications. Cannot use the hooks everywhere as we use them in redux and react-query handlers as well. Figured we can have a component always rendered in App that will listen to messages sent through DOM events. Hope this helps someone. Should be easily tweaked to support modals or messages.

NotificationHolder.tsx

import { App } from 'antd';
import React from 'react';

import { NotificationDetail } from 'utils';

export function NotificationHolder(): null {
    const { notification } = App.useApp();

    React.useEffect(() => {
        const handleMessage = ((event: CustomEvent<NotificationDetail>) => {
            const { args, type } = event.detail;
            notification[type](args);
        }) as EventListener;

        document.addEventListener('notificationEvent', handleMessage);

        return () => {
            document.removeEventListener('notificationEvent', handleMessage);
        };
    }, [notification]);

    return null;
}

utils/notification.ts

import { ArgsProps, NotificationInstance } from 'antd/es/notification/interface';

export interface NotificationDetail {
    type: 'success' | 'error' | 'warning' | 'info';
    args: ArgsProps;
}

function getEvent(type: NotificationDetail['type'], args: ArgsProps) {
    return new CustomEvent<NotificationDetail>('notificationEvent', {
        detail: {
            type,
            args,
        },
    });
}

export const notification: Omit<NotificationInstance, 'open' | 'destroy'> = {
    info: (args: ArgsProps) => {
        document.dispatchEvent(getEvent('info', args));
    },
    error: (args: ArgsProps) => {
        document.dispatchEvent(getEvent('error', args));
    },
    success: (args: ArgsProps) => {
        document.dispatchEvent(getEvent('success', args));
    },
    warning: (args: ArgsProps) => {
        document.dispatchEvent(getEvent('warning', args));
    },
};

Your App.tsx

import { App } from 'antd';
import { NotificationHolder } from 'components';

<App>
  <NotificationHolder />
</App>

Anywhere else

import { notification } from 'utils';

notification.success({ message: 'Operation successful.' })

[afc163]

Duplicate of #40546