CodePen Embed - https://qna.habr.com/q/1372220 2


    <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width">
          <meta name="theme-color" content="#000000">
        </head>
        <body>
          <div id="container" style="padding: 24px" />
          <script>const mountNode = document.getElementById('container');</script>
        </body>
      </html>

.custom-class .ant-message-notice-content {
  background: #f00 !important;
}

const { createRoot } = ReactDOM;

const {  Button, message  } = antd;
const App = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const success = () => {
    messageApi.open({
      type: 'success',
      content: 'This is a prompt message with custom className and style',
      className: 'custom-class',
      style: {
        marginTop: '20vh',
      }
    });
  };
  return (
    <>
      {contextHolder}
      <Button onClick={success}>Customized style</Button>
    </>
  );
};
const ComponentDemo = App;


createRoot(mountNode).render(<ComponentDemo />);

View Compiled

This Pen is owned by AjiTae on CodePen.

See more by @ajitae on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript