mdl-layout__inner-container breaks fixedHeader

[dantman]

MDL defines the following in the SASS for .mdl-layout__header.

    @media screen and (max-width: $layout-screen-size-threshold) {
      & {
        display: none;
      }

      .mdl-layout--fixed-header > & {
        display: flex;
      }
    }

However the DOM that react-mdl outputs is:

<div class="... mdl-layout--fixed-header"
>
  <div class="mdl-layout__inner-container">
    <header class="mdl-layout__header">
      ...
    </header>
    <div class="mdl-layout__content">
      ...
    </div>
  </div>
</div>

This means that .mdl-layout--fixed-header > & will never apply to <Header> and headers will always be hidden on small screens.

[tleunen]

Hmm Do you have an example?

Here's the output I see:

@media screen and (max-width: 1024px)
.mdl-layout--fixed-header > .mdl-layout__inner-container > .mdl-layout__header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

[EduardoAC]

I agree with @dantman, I have the same problem with react-mdl 1.9.0 and material-design-lite 1.3.0.

Material design lite added to my package.json and incorporate it by my index.scss

[EduardoAC]

The reason because it happens to me is related with the extra CSS require by react-mdl if you do

@import "~react-mdl/extra/material.css";

it may fix your problem as well.

I disagree to hide extra nested structure on the top of MDL itself, make hard to debug and understand because the CSS behaviour expected is different that the one provide by google