不同样式的角材料组件

Question

我将在两个具有不同样式的不同组件中使用Angular Stepper。 一个步进器位于对话框中，另一个位于常规组件中。 当我首先打开对话框时，样式还可以。 但是，当我打开“常规”组件然后转到对话框时，它将覆盖“常规”组件步进器中的样式。

对话

import pandas as pd
import matplotlib.pyplot as plt
import numpy as np
from scipy.interpolate import griddata

d = ({
    'Time1' : ['8:00:00','10:30:00','12:40:00','16:25:00','22:30:00','1:31:00','2:15:00','2:20:00','2:30:00'],
    'Occurring1' : ['1','2','3','4','5','4','3','2','1'],
    'Time2' : ['8:10:00','10:10:00','13:40:00','16:05:00','21:30:00','1:11:00','3:00:00','3:01:00','6:00:00'],
    'Occurring2' : ['1','2','3','4','5','4','3','2','0'],
    'Time3' : ['8:05:00','11:30:00','15:40:00','17:25:00','23:30:00','1:01:00','6:00:00','6:00:00','6:00:00'],
    'Occurring3' : ['1','2','2','3','2','1','0','0','0'],
    'Time4' : ['9:50:00','10:30:00','14:40:00','18:25:00','20:30:00','0:31:00','2:35:00','6:00:00','6:00:00'],
    'Occurring4' : ['1','2','3','4','4','3','2','0','0'],
    'Time5' : ['9:00:00','11:30:00','13:40:00','17:25:00','00:30:00','2:31:00','6:00:00','6:00:00','6:00:00'],
    'Occurring5' : ['1','2','3','3','2','1','0','0','0'],                   
     })

df = pd.DataFrame(data=d)

df = df.astype({
    "Time1": np.datetime64,
    "Occurring1": np.int,
    "Time2": np.datetime64,
    "Occurring2": np.int,
    "Time3": np.datetime64,
    "Occurring3": np.int,
    "Time4": np.datetime64,
    "Occurring4": np.int,
    "Time5": np.datetime64,
    "Occurring5": np.int,    
})

all_times = df[["Time1", "Time2", "Time3",'Time4','Time5']].values

t_min = np.timedelta64(int(60*1e9), "ns")

time_grid = np.arange(all_times.min(), all_times.max(), 10*t_min, dtype="datetime64")
X = pd.Series(time_grid).dt.time.values
occurrences_grid = np.zeros((5, len(time_grid)))

for i in range(5):
    occurrences_grid[i] = griddata(
        points=df["Time%i" % (i+1)].values.astype("float"),
        values=df["Occurring%i" % (i+1)],
        xi=time_grid.astype("float"),
        method="linear"
    )

occ_min = np.min(occurrences_grid, axis=0)
occ_max = np.max(occurrences_grid, axis=0)
occ_mean = np.mean(occurrences_grid, axis=0)

plt.style.use('ggplot')
plt.fill_between(X, occ_min, occ_max, color="blue")
plt.plot(X, occ_mean, c="white")
plt.tight_layout()
plt.show()

import { Component, OnInit, Inject } from '@angular/core';
import { ApiService } from './api.service';
import * as socketIO from 'socket.io-client';
import * as $ from 'jquery';
import { FormBuilder, FormGroup } from '@angular/forms';


import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';


export interface DialogData {
  locations: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'pilot';

  constructor(private ApiService:ApiService, public dialog: MatDialog) { }

  ngOnInit() {

    //.......
    // $("#widget").colorwheel();
    
  }
  
      openDialog(): void {
       const dialogRef = this.dialog.open(NewModuleDialogComponent, {
          width: '650px',
          data: {locations: this.ApiService.locations},
        });
     }
}





@Component({
  selector: 'app-new-module-dialog',
  templateUrl: './new-module-dialog/new-module-dialog.component.html',
  styleUrls: ['./new-module-dialog/new-module-dialog.component.css']
})
export class NewModuleDialogComponent implements OnInit {


  constructor(
     public dialogRef: MatDialogRef<NewModuleDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: DialogData){ }

  ngOnInit() {
  }

}

/deep/ .mat-dialog-container{
	padding: 0;
	background-color: #AFAFAF;
	border: 2px solid orange;
}

/deep/ .mat-stepper-vertical{
	background-color: #373B3E5F  !important;
	color: white !important;
}	


/deep/ .mat-step-header .mat-step-label.mat-step-label-active{
	color: white !important;
}

/deep/ .mat-step-header .mat-step-icon{
	background-color: white;
	padding: 5px;
}

/deep/ .mat-step-icon-selected{
	background-color: #ACDD33 !important;
}

/deep/ .mat-stepper-vertical-line::before{
	border-left-color: #ACDD33 !important;
	margin-left: 4px;
}

.matOption:hover{
	background-color:  #ACDD33a0;
}

/deep/.mat-form-field-appearance-legacy .mat-form-field-label{
	color: white !important;
}

/deep/.mat-form-field-label-wrapper{
	border-bottom: 1px solid #98999D !important;
}

/deep/.mat-input-element{
	caret-color: white !important; /*//kurser*/
	color: white  !important;
}


/deep/.mat-select-value{
	/*position: relative;
	left: -250px;*/
	color: white !important;
}

/deep/.mat-select-arrow{
	position: relative;
	left: -250px;
	color: #ACDD33 !important;
}

/deep/.mat-vertical-content{
	padding-bottom: 0px !important;
}

和“正常”组件

<h2 mat-dialog-title>Neues Modul erkannt</h2>
<!-- <div mat-dialog-content>
  <p>Raum</p>
</div>
<div mat-dialog-content>
  <p>Bezeichnung</p>
</div> -->
<div class="NMD">
<mat-vertical-stepper [linear]="isLinear" #stepper2>
  <mat-step>
    <form>
      <ng-template matStepLabel>Raum zuordnem</ng-template>
       <mat-select class="selectPanel" placeholder="Raum">
	       <div *ngFor="let location of data.locations" >
			    <mat-option  class="matOption" [value]="location.location">
			        {{location.location}}
			    </mat-option>
			</div>
		</mat-select>
	</form>
  </mat-step>
  
  <mat-step>
    <form>
      <ng-template matStepLabel>Benennen</ng-template>
      <mat-form-field>
        <input matInput placeholder="Name" required>
      </mat-form-field>
    </form>
  </mat-step>
   <mat-step>
     <form>
      <ng-template matStepLabel>Modul hinzufügen</ng-template>
        <!-- <div mat-dialog-actions>
          <button mat-button [mat-dialog-close]="true">Abbrechen</button>
          <button mat-button cdkFocusInitial>Speichern</button>
        </div> -->
      </form>
   </mat-step>
  
</mat-vertical-stepper>
</div>

#scenes{
	display: flex;
	flex-direction: column;	
	padding: 0;
	margin: 0;
	margin-left: 210px;
	//height: 100%;
	overflow: hidden;
}

.mat-form-field{
	display: block;
	width: 200px;
	font-weight: 300;
	padding-top: 3px;
//	color: white;

}

/deep/.mat-expansion-panel-content{
	font: normal;
}

/deep/.mat-form-field-appearance-legacy .mat-form-field-label{
	color: #98999D !important;
}

/deep/.mat-form-field-label-wrapper{
	border-bottom: 1px solid #98999D !important;
}

/deep/.mat-input-element{
	caret-color: #98999D !important; /*//kurser*/
	color: #98999D  !important;
}

/deep/.mat-expansion-panel-header-title{
	color: #98999D !important;
}

/deep/ .mat-expansion-panel-header-description{
	color: #98999D !important;
	font-weight: 200;
}


/deep/ .mat-expansion-panel{
	margin: 20px 60px !important; 
	background-color: #444247;
	color: #98999D !important;
}

/deep/ .mat-expansion-panel-header{
	padding-left: 0px !important;
	padding-top: 0px !important;
	background-color: none  !important;
	padding-bottom: 0px !important;
}

/deep/ .mat-expansion-panel-header .mat-expanded{
	background-color: none !important;
}

/deep/.mat-expansion-panel-header.komfortScene{
	background-color:  #0070c040  !important;
}

/deep/.mat-expansion-panel-header.timerScene{
	background-color:  #8e0fbc40  !important;
}
/deep/.mat-expansion-panel-header.alarmScene{
	background-color:  #ff000040  !important;
}

.szenenContainer{
	display: flex;
	padding-top: 10px;
}

.activityClass{
	//padding-top: 16px;
	padding-left: 40px;
}

.activityClass span{
	color:  #373B3E;
	font-weight: 300;
}

/deep/ .mat-expansion-panel-body{
	padding: 0 !important;
}

/deep/ .mat-stepper-vertical{
	background-color: #373B3E5F  !important;
	color: white !important;
}

/deep/ .mat-step-header .mat-step-label.mat-step-label-active{
	color: #98999D !important;
}

/deep/ .mat-step-header .mat-step-icon{
	background-color: white;
	padding: 5px;
}

/deep/ .mat-step-icon-selected{
	background-color: #ACDD33 !important;
}

/deep/ .mat-stepper-vertical-line::before{
	border-left-color: #ACDD33 !important;
	margin-left: 4px;
}

/deep/ .mat-button-toggle-checked{
	background-color: #ACDD33 !important;
}

.toggleTabGroup{
	margin-top: 20px;
}

.toggleTab span{
	display: block;
	line-height: 12px;
	width: 50px;
	color: #98999D;
	font-weight: 200;
}

.preconfigOption1{
	background-color:  #98999D1F;
}

.preconfigOption1:hover{
	background-color:   #ACDD33a0;
}

.matOption:hover{
	background-color:   #ACDD33a0;
}


.selectPanel{
	padding-left: 250px;
//	padding-top: -50px;
}

/deep/.mat-select-value{
	position: relative;
	left: -250px;
	color: #98999D;
}

/deep/.mat-select-arrow{
	position: relative;
	left: -250px;
	color: #ACDD33 !important;
}

/deep/.mat-vertical-content{
	padding-bottom: 0px !important;
}

.matPanelSceneSymbol{
	display: flex;
	justify-content: center;
	border-right: 1px solid  #98999D;
	float: left;
	height: 50px;
	width: 60px;
	padding: 0;
	background-color: #373B3E;
}

.matPanelSceneSymbol i{
	margin-top: 8px;
}

.matPanelSceneText{
	padding: 15px 20px;
}