reactjs - Ant Design Notification 未在 React App 中使用自定义样式
问题描述
我目前在尝试为 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
有什么特别的我做错了吗?
解决方案
答案是使用 ::global 修改父 ant 容器,并且只在所需组件中调用 css 类。
推荐阅读
- python - 在多列上应用 lambda 函数
- ruby-on-rails - 我想在 elastic beanstalk 中看到 rails 应用程序,但我可能会对 ruby 版本感到愤怒
- azure - Azure 数据工厂中的参数化数据集
- python - 列表对象作为数组对象的参数值是否占用 Python 中的内存?
- wordpress - 如何删除自动生成
来自之前生成的 WordPress 编辑器的标签
- google-cloud-platform - 是否可以通过 API 在源代码库中使用 cloudbuild.yaml 调用 Google Cloud Build
- geometry - 将简单几何/形状转换为纯文本的工具(用作代码注释)
- r - 如何不考虑(在过滤器语句中)函数 R 中缺少的参数
- reactjs - 为什么点击事件没有在购物车中添加数量
- android - WorkManager/PeriodicWorkRequest - 如果之前的工作已经重试,下一个工作何时执行?