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


    <!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>

const { createRoot } = ReactDOM;

const {  Button, message, ConfigProvider  } = 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 (
  <ConfigProvider
    theme={{
      components: {
        Message: {
          contentBg: '#f00',
        },
      },
    }}
  >
      {contextHolder}
      <Button onClick={success}>Customized style</Button>
 </ConfigProvider>
  );
};
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