Ant design notification icon position

Question

I'm using Ant Design to create Notification component. I need it to be 40px in height, so I added some styles and my component now looks like this:

import React from 'react';
import { notification } from 'antd';
import { CheckOutlined, CloseOutlined, QuestionOutlined } from "@ant-design/icons";

const NotificationComponent = ({ options }) => {

  const icons = {
    'success': <CheckOutlined style={{ color: "#fff" }} />,
    'failure': <CloseOutlined style={{ color: "#fff" }} />,
    'info': <QuestionOutlined style={{ color: "#fff" }} />
  }

  const openNotification = () => {
      notification.open({
        message: (
          <div style={{ color: "#fff", position: "absolute", top: '6px', bottom: 0, lineHeight: '40px' }}>
              <p style={{ margin: 0 }}>{ options.text }</p>
          </div>
        ),
        icon: icons[options.icon],
        closable: false,
        duration: 500,
        placement: 'top',
        style: {
          backgroundColor: options.icon === "success" ? "#6FCF97" : (
            options.icon === "failure" ? "#FF708B" : "#828EE3"
          ),
          height: "40px",
          margin: 0
        }
      });
    };
  
    return (
      <div>
        <button onClick={openNotification}>Показать уведомление</button>
      </div>
    );
  };
  
  export default NotificationComponent;

The issue is - I need my notification icon to be higher, which I tried to do be negative margin-top, but it doesn't work.

Is there a way to do what I want?
Link to code sandbox example: https://codesandbox.io/s/elated-euler-5j9nq6?file=/src/Notification.jsx:0-1189

Answer 1

You just need a couple of css tweaks.

https://codesandbox.io/s/cocky-ptolemy-38d6h7

const openNotification = () => {
    notification.open({
      message: (
        <div style={{ color: "#fff" }}>
          <div>{options.text}</div>
        </div>
      ),
      icon: icons[options.icon],
      closable: false,
      duration: 500,
      placement: "top",
      style: {
        backgroundColor:
          options.icon === "success"
            ? "#6FCF97"
            : options.icon === "failure"
            ? "#FF708B"
            : "#828EE3",
        height: "40px",
        lineHeight: "40px",
        padding: 8,
        margin: 0
      }
    });
  };