Ant Design Notification 未在 React App 中使用自定义样式

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.less 文件中的内容

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

这是我测试代码的地方 https://codesandbox.io/s/customized-style-ant-design-demo-n0yh7

我做错了什么？

Answer 1

答案是使用 ::global 修改父 ant 容器，并且只在所需组件中调用 css 类。