I can't style a react portal component

Question

I have a portal component:

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

And I render it in this way:

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

But the styles don't take effect. when I look at the devtools there are no styles. like they are ignored.

when I remove the Portal wrapper from the HoveringToolbar component everything is ok. what is the problem?

EDIT: I figured out that I can set the styles using js and it works but still don't understand why I can't use style and class tags to set the styles.