Portal component's wrapper div cannot be styled

[mdawar]

Describe the bug

I'm using the Portal component for a toast element where I noticed that the wrapper div element is messing up the styles of the elements.

I know that this div is required, but is it possible to at least add the ability to add the class attribute for this element for these edge cases?

Your Example Website or App

https://stackblitz.com/edit/solidjs-templates-cshflq?file=src%2FApp.tsx

Steps to Reproduce the Bug or Issue

1. Go to the StackBlitz demo
2. Click the button to show the toast
3. You will see that the styles are messed up
4. If you inspect the elements and manually remove the wrapping div the layout will be fixed

Expected behavior

I expected to at least be able to add the class attribute to the Portal's wrapper div. I would also be great if we can pass any attributes down to the div element.

Screenshots or Videos

No response

Platform

• OS: Linux
• Browser: Chrome
• Version: 116

Additional context

Sorry if this issue is too specific, feel free to close it if it's out of scope.

[AFatNiBBa]

You could set the "ref" attribute on the Portal like so:

<Portal ref={x => x.style.display = "contents"} />

This will make the div behave like it wasn't even there (At least visually). You can even put in a separate method to avoid repeating it every time:

const hidePortalDiv: (x: HTMLElement) => void = x => x.style.display = "contents";
// ...
<Portal ref={hidePortalDiv} />
// ...
<Portal ref={hidePortalDiv} />