Уведомление Ant Design не использует пользовательские стили в приложении React

Question

У меня сейчас проблема с попыткой использовать пользовательские стили для модуля уведомлений Ant Design. Вот мой код

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import "./notification.less";
import { Button, notification } from "antd";

const openNotification = () => {
  notification.open({
    message: "Notification Title",
    description:
      "This is the content of the notification. This is the content of the notification. This is the 
content of the notification.",
    className: "notification-type-info"
  });
};

ReactDOM.render(
  <Button type="primary" onClick={openNotification}>
    Open the notification box
  </Button>,
  document.getElementById("container")
);

Вот что находится в моем файле без уведомлений

.notification-type-info {
  width: 200px;
  background-color: #1890ff;
}

Здесь я тестирую код https://codesandbox.io/s/customized-style-ant-design-demo-n0yh7

Что-нибудь конкретное, что я делаю неправильно?

Answer 1

Ответ заключался в том, чтобы изменить родительский контейнер ant с помощью :: global и вызывать только класс css в рамках требуемого компонента.