Question

我仍在学习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/

有没有办法将其包装到样式化的组件中？

非常感谢

Answer 1

设置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}}

有没有一种方法可以将样式化的组件用于ANT通知？

1 个答案: