reactjs - 我无法设置反应门户组件的样式

Question

我有一个门户组件：

const Portal = ({ children }) => {
    return typeof document === "object"
        ? ReactDOM.createPortal(children, document.body)
        : null;
};

我以这种方式渲染它：

const HoveringToolbar = () => {
    ...
    return (
        <Portal>
            <div
                ref={ref}
                style={{
                    position: "absolute",
                }}
            >
                <FormatButton format="bold" icon="format_bold" />
                <FormatButton format="italic" icon="format_italic" />
                <FormatButton format="underlined" icon="format_underlined" />
            </div>
        </Portal>
    );
};

但是样式不生效。当我查看 devtools 时，没有样式。就像他们被忽略一样。

当我从 HoveringToolbar 组件中删除 Portal 包装器时，一切正常。问题是什么？

编辑：我发现我可以使用 js 设置样式并且它可以工作，但仍然不明白为什么我不能使用style和class标签来设置样式。