有没有办法将样式化的组件用于 ANT 通知？

Posted 2023-03-15

【中文标题】有没有办法将样式化的组件用于 ANT 通知？

【英文标题】：Is there a way to use styled components for ANT notifications?

【发布时间】：2020-12-06 22:52:44

【问题描述】：

我还在学习 antdesign 和 styled-components 之间的交互，我有一个问题：

我知道我可以通过像 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/

有没有办法把它包装成一个样式化的组件？

非常感谢，

【问题讨论】：

我设法通过 styled-components API 中的“createGlobalStyle”方法使其按照我想要的方式工作。但我对此并不满意。 :)

【参考方案1】：

设置 Antd 通知样式的一种简单方法是使用 API 中的 style 配置

style: 自定义内联样式 -> CSSProperties

这是一个简单的例子CodeSandBox。

---

要将 antd 与 styledComponents 一起使用，您可以覆盖 getContainer，它默认返回 document.body。这就是您的 createGlobalStyle 方法有效的原因。

在这里，您可以将ref 返回到您的触发器，例如到Button。

getContainer: (triggerNode) => buttonRef.current

注意：这样选择了正确的样式，但整个通知似乎被破坏了（测试取消按钮）。

来自CodeSandbox的完整代码示例。

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"));