如何在angular material的$mdToast中同时使用自定义主题和模板

import { MdSnackBar, MdSnackBarConfig } from '@angular/material';

constructor(private snackBar: MdSnackBar) { }

const toastConfig: MdSnackBarConfig = {
  extraClasses: ['custom-toast'],
  duration: 3000,
  panelClass: 'custom-toast-panel'
};

<ng-template #customToast>
  <span class="custom-toast-message">这是一个自定义的提示消息</span>
</ng-template>

this.snackBar.openFromTemplate(this.customToast, toastConfig);

import { Component, ViewChild, TemplateRef } from '@angular/core';
import { MdSnackBar, MdSnackBarConfig } from '@angular/material';

@Component({
  selector: 'app-example',
  template: `
    <ng-template #customToast>
      <span class="custom-toast-message">这是一个自定义的提示消息</span>
    </ng-template>
    <button (click)="showToast()">显示提示消息</button>
  `,
  styles: [`
    .custom-toast-message {
      color: #fff;
    }
    .custom-toast-panel {
      background-color: #333;
    }
  `]
})
export class ExampleComponent {
  @ViewChild('customToast') customToast: TemplateRef<any>;

  constructor(private snackBar: MdSnackBar) { }

  showToast() {
    const toastConfig: MdSnackBarConfig = {
      extraClasses: ['custom-toast'],
      duration: 3000,
      panelClass: 'custom-toast-panel'
    };

    this.snackBar.openFromTemplate(this.customToast, toastConfig);
  }
}