When using library inside of a component the CSS is bugging after page is reloaded.

[paoloviselli]

I am trying to use the library to generate a drop down menu from a button within a component.

Like so:

The library is working on most cases, however if I reload the page and try to use the drop down again this happens:

The functionality is still there (e.g. if I click on the text fields that popped up they still redirect where they are supposed to, however the css is bugged).

Anyone experienced this too or knows where the problem might be?

Here the snippet of my code where I use the Menu

Thanks

[szhsin]

Hi @paoloviselli , your code looks good to me. The only issue is MenuButton wraps a Button which is not necessary. You might use Button for the menuButton prop directly. But I think this is not related to the styling bug in your code.

Are you using the default index.css that comes with the npm package? If so, is the css still applied after page is reloaded?

[paoloviselli]

Hi @szhsin I am using the default index.css however the CSS kept disappearing each time I reloaded the page. I had to install Material UI for other components and I ended up using also their Menu and the MUI Menu, used in the same exact code does not present that issue.

However the weird thing was that I was using your Menu library on another page of my project and it was not presenting this issue at all. The only difference in this use was the fact that is was not nested into any components. Might be that the problem?

Hope this helps.

[szhsin]

Nesting the menu into components is totally fine. You could use browser dev tools to inspect what css has been applied to menu before and after the page is reloaded.

Also, you don't have to use the index.css. The css rules in the file can be copied into your project stylesheets or CSS-in-JS solution.