bug(drag-drop): moved item doesn't retain inherited styles

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When dragging around an item, all styles (included the inherited ones) shall be retained to keep the look&feel consistent

What is the current behavior?

Inherithed styles are not retained

What are the steps to reproduce?

1. Create a list of elements suitable for D&D
2. Add mat-typography class on the cdk-drop container
3. Drag one item of the list and notice that it doesn’t retain Roboto font

What is the use-case or motivation for changing an existing behavior?

Consistency

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.1.8 Material 6.4.7

Is there anything else we should know?

As a workaround it’s possible to add to items a class with all needed styles which would have been inherited from the container.

Being moved to root level (aka out of it’s normal containers and CSS rules flow) for the duration of the dragging event, the item should have all currently applied inherited CSS rules copied to avoid inconsistent look&feel

[matt328]

This is especially cumbersome when working with mat-list-items that need to be children of a mat-list in order for their styling to be applied correctly.

[bhumin3i]

same issue :

<mat-nav-list class="p-0 " perfectScrollbar>
           <mat-list dense cdkDropList [cdkDropListData]="sharedService.sharedUserProfiles"
             [cdkDropListConnectedTo]="getCategoryIds()" class="top-margin">
             <mat-divider></mat-divider>
             <mat-list-item class="cust-display-list" mat-line
               *ngFor="let profile of sharedService.sharedUserProfiles, let i = index" cdkDrag>
               <img matListAvatar class="fix-avatar-height" src="/assets/user.jpg" alt="...">
               <h3 matLine>{{profile.info.fullname}} </h3>
               <p matLine>
                 <span> {{profile.info.title}}</span>
               </p>
               <button mat-icon-button>
                 <mat-icon>drag_indicator</mat-icon>
               </button>
               <mat-divider></mat-divider>
             </mat-list-item>
           </mat-list>
         </mat-nav-list>