Reactjs 如何使用样式化组件为React.createPortal动态创建DOM目标？

我正在使用

React.createPortal

创建一个组件，该组件将插入名为

toast container

的目标中。目前，定义此目标的唯一方法是直接在my.html文件中硬编码

。我正在我的应用程序中使用

样式化组件

，我需要一种方法来动态创建这个

toast容器

。有没有办法做到这一点，例如：

const ToastContainerWrapper = styled.div`
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
`;

const ToastContainer = () => <ToastContainerWrapper id="toast-container" />;

const toastContainerRapper=styled.div`
位置：绝对位置；
排名：0；
右：0；
宽度：300px；
`;
const toast container=（）=>；

我没有使用过样式化组件。如果你想创建

<div id="toast-container"></div>

在HTML页面中，可以使用普通的dom函数动态执行此操作。应该在div标记中呈现组件之前完成此操作

window.addEventListener('load', () => {
   const toastContainer = document.createElement('div');
   toastContainer.id = 'toast-container';
   document.body.appendChild(toastContainer); //Here the toast-container is directly inserted in the body tag.

   ReactDOM.render(<RComp/>, toastContainer);
});

window.addEventListener（'load'，（）=>{
const toast container=document.createElement（'div'）；
toast container.id='toast container'；
document.body.appendChild（toast容器）；//在这里，toast容器直接插入到body标记中。
render（，toastContainer）；
});

这些问题专门询问如何使用样式化组件，并且更愿意保持答案的相关性。@JoeTidee，我认为样式化组件会返回一个react组件。因此，您间接地问，如何在html中动态创建html容器以包含react-app。您是否使用

react-toastify

？如果是这样的话，有什么理由不只是使用提供的

toastcainer

组件？API已经允许您设置通知的位置和宽度。