Question 201401 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – MaterialUI (MUI) BottomNavigation unwanted transparency

Aspiring hobby developer here. I’ve used create-react-app to start a new project and import the MUI dependencies.

I added a fixed BottomNavigation like this:

Edit unwanted-transparant-bottomnavigation

In CodeSandbox the BottomNavigation is not transparant as I would expect. However, on my development machine, the BottomNavigation is transparant. Meaning that when scrolling through longer pages, the content is visible through the BottomNavigation.

I have no idea what could be causing this? Could it be a bug in my MUI-version or should I check something in my code?

Any help is highly appreciated!

Thanks for your time,

Maarten

Tags:

2

Answers


  1. 0

    you probably have a theme on your development machine that changes the style of the BottomNavigation component, can you show the code you have on your machine ?

    Login or Signup to reply.
  2. 0

    It’s not whether the BottomNavigation is transparent or not (which is isn’t) — the label on your TextFields have a default zIndex value of 1 and your BottomNavigation does not have a zIndex defined at all. This is making the label appear to "float above" the BottomNavigation in the current stacking context. You can correct this by adding a zIndex of 1 (or higher) to the sx prop of BottomNavigation. For example:

    <BottomNavigation
  sx={{
    position: "fixed",
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 1 // Setting zIndex
  }}
>

    FYI: The BottomNavigation component API does not have an elevation prop. That’s used by Paper for the drop shadow effect (where I’m assuming you got your example).

    Working CodeSandbox: https://codesandbox.io/s/unwanted-transparant-bottomnavigation-forked-cz97df

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search