如何解决有没有一种方法可以将样式化的组件用于ANT通知?
我仍在学习antdesign和样式化组件之间的交互,并且我有一个问题:
我知道我能够传递像popover这样的组件的样式(接受“ overlayClassName”道具),例如:
const styledPopover = ({ className,...props }) => (<ANTPopover {...props} overlayClassName={className} />);
styledPopover.propTypes = {
className: PropTypes.string,};
export const Popover = styled(styledPopover)`...`
但是对于通知,我有className属性,但没有要样式的组件,只有一个函数。
https://ant.design/components/notification/
有没有办法将其包装到样式化的组件中?
非常感谢
解决方法
设置Antd通知样式的一种简单方法是使用API中的getContainer
配置
style:自定义内联样式-> CSSProperties
这是一个简单的示例CodeSandBox。
要将antd与styledComponents一起使用,可以覆盖document.body
,默认情况下返回createGlobalStyle
。这就是为什么您的ref
方法有效的原因。
在这里您可以将Button
返回到触发器,例如到getContainer: (triggerNode) => buttonRef.current
。
import React,{ useRef } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Button,notification } from "antd";
import styled from "styled-components";
const Styled = styled.div`
.ant-notification-notice {
background-color: green;
}
`;
const Notification = () => {
const openNotification = () => {
notification.open({
message: "Notification Title",duration: 20,description:
"This is the content of the notification. This is the content of the notification. This is the content of the notification.",onClick: () => {
console.log("Notification Clicked!");
},getContainer: (triggerNode) => {
console.log(triggerNode);
console.log(buttonRef);
// return document.body;
return buttonRef.current;
}
});
};
const buttonRef = useRef(null);
return (
<Styled>
<Button type="primary" onClick={openNotification} ref={buttonRef}>
Open the notification box
</Button>
</Styled>
);
};
ReactDOM.render(<Notification />,document.getElementById("container"));
注意:这样,您选择了正确的样式,但是整个通知似乎已损坏(测试“取消”按钮)。
CodeSandbox中的完整代码示例。
{{1}}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。