Why "mdl-layout__inner-container"?

[trungtin]

I have read your issue here google/material-design-lite#1356. The problem is automatic created mdl-layout__container, right? But then you replace it with mdl-layout__inner-container, so when using React-router inside Nav, React still throw those "mutated element" errors. The question is why we need it in the first place, in my usecase I just remove the function created the div and add mdl-layout__inner-container to mdl-layout div directly, and everything seem fine so far. Is there any problem with that? I think mdl-layout__inner-container Css footprint is quite small and seem fit to "mdl-layout" itself

Edit2: hmm, after remove mdl-layout_inner-container, I cannot have fixed header anymore, try to understand the layout js and css files, but no help? (It's too complicated for me :( )

Edit3: Sorry for too much edit, but I solved partly* by just put mdl-layout_inner-container div manually inside Layout component after remove the code adding that in material.js file, so I wonder why don't you do it this way? Thanks so much.
*partly: because it still not work with mdl-layout position: relative (for centering thing, you know) but work with position: absolute

Edit: And other minor problem: I think that Cell is to be used combine with others element, not seperately as current implementation. At least in case of use with Card, if combine, Cell width would overwrite Card default width 320px, I work-around by set Card width to 100%. Maybe another element like CellCard or a way to specific mdl-cell--${}-col for each element.

[tleunen]

Hi @trungtin and sorry for the delay of this response.

The goal of the inner-container was to resolve this issue #4.
Basically, the idea behind was to always have a known element as the root of the component. After that, the component could dynamically create inner element if it wants.
For my last tests, and based on what was done for the website (which uses React-Router and the inner container layout), everything still work. The MDL team already told they will work on a better implementation of the Layout component in their v2, but until then, what I suggested is the better "small fix" I found.

You don't really remove the inner-container, a lot of css is based on that, indeed. So I'm not surprised some features don't work if you remove it.

Do you have a repo or a gist for your issue using React-MDL with React-Router? Maybe I can help finding the real issue.

For the Card and Cell, they are not meant to be used together. Cell is part of the Grid. Card has its own "subcomponents". What do you want to do? Having a grid inside a card? In that case, defines a grid before setting the cells :)