react-mdl-css/material.css

Use Custom style from https://getmdl.io/customize in your react-mdl app

/* Credits: React-mdl */
.mdl-layout {
  position: absolute; }

.mdl-layout__inner-container {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  -webkit-overflow-scrolling: touch; }

@media screen and (min-width: 1025px) {
  .mdl-layout--fixed-drawer > .mdl-layout__inner-container > .mdl-layout__drawer {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  .mdl-layout--fixed-drawer > .mdl-layout__inner-container > .mdl-layout__drawer-button {
    display: none; }
  .mdl-layout--fixed-drawer > .mdl-layout__inner-container > .mdl-layout__header .mdl-layout__header-row {
    padding-left: 40px; }}

.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > .mdl-layout__inner-container > .mdl-layout__header {
  margin-left: 240px;
  width: calc(100% - 240px); }

.mdl-layout--fixed-drawer > .mdl-layout__inner-container > .mdl-layout__content {
  margin-left: 240px; }

.mdl-layout.has-scrolling-header .mdl-layout__content {
  overflow: visible; }

@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; }
    .mdl-layout--fixed-drawer > .mdl-layout__inner-container > .mdl-layout__content {
      margin-left: 0; }
    .mdl-layout.has-scrolling-header .mdl-layout__content {
      overflow-y: auto;
      overflow-x: hidden; }}