材质设计布局CSS在ui-view中不起作用

Question

我正在关注材料设计的入门应用程序，并且在尝试查看index.html中的所有代码时工作正常，当我包含ui-view时，布局变形..

的index.html

<md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2"
                md-component-id="left"
                md-is-locked-open="$mdMedia('gt-sm')">

    <md-toolbar class="md-whiteframe-z1">
      <h1>Users</h1>
    </md-toolbar>
    <md-list>
      <md-list-item ng-repeat="it in ul.users">
          <md-button ng-click="ul.selectUser(it)" ng-class="{'selected' : it === ul.selected }">
            <md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>
            {{it.name}}
          </md-button>
      </md-list-item>
    </md-list>
  </md-sidenav>
  <div flex layout="column" tabIndex="-1" role="main" class="md-whiteframe-z2">

    <md-toolbar layout="row" class="md-whiteframe-z1">
      <md-button class="menu" hide-gt-sm ng-click="ul.toggleList()" aria-label="Show User List">
        <md-icon md-svg-icon="menu" ></md-icon>
      </md-button>
      <h1>Angular Material - Starter App</h1>
    </md-toolbar>

    <md-content flex id="content">
        <md-icon md-svg-icon="{{ul.selected.avatar}}" class="avatar"></md-icon>
        <h2>{{ul.selected.name}}</h2>
        <p>{{ul.selected.content}}</p>

        <md-button class="contact" md-no-ink ng-click="ul.showContactOptions($event)" aria-label="Contact User">
          <md-tooltip>Contact {{ ul.selected.name }}</md-tooltip>
          <md-icon md-svg-icon="share"></md-icon>
        </md-button>
    </md-content>

  </div>

但是当我参与其中时

的index.html

    <md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2"
                    md-component-id="left"
                    md-is-locked-open="$mdMedia('gt-sm')">

        <md-toolbar class="md-whiteframe-z1">
          <h1>Users</h1>
        </md-toolbar>
        <md-list>
          <md-list-item ng-repeat="it in ul.users">
              <md-button ng-click="ul.selectUser(it)" ng-class="{'selected' : it === ul.selected }">
                <md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>
                {{it.name}}
              </md-button>
          </md-list-item>
        </md-list>
      </md-sidenav>

<div ui-view></div>

和 source.html as

<div flex layout="column" tabIndex="-1" role="main" class="md-whiteframe-z2">

        <md-toolbar layout="row" class="md-whiteframe-z1">
          <md-button class="menu" hide-gt-sm ng-click="ul.toggleList()" aria-label="Show User List">
            <md-icon md-svg-icon="menu" ></md-icon>
          </md-button>
          <h1>Angular Material - Starter App</h1>
        </md-toolbar>

        <md-content flex id="content">
            <md-icon md-svg-icon="{{ul.selected.avatar}}" class="avatar"></md-icon>
            <h2>{{ul.selected.name}}</h2>
            <p>{{ul.selected.content}}</p>

            <md-button class="contact" md-no-ink ng-click="ul.showContactOptions($event)" aria-label="Contact User">
              <md-tooltip>Contact {{ ul.selected.name }}</md-tooltip>
              <md-icon md-svg-icon="share"></md-icon>
            </md-button>
        </md-content>

      </div>