CSS Styling не работает в Angular 6 после использования углового материала

Question

Я использовал загрузчик с Angular 6 для разработки веб-страницы.Затем я добавил материал sidenav, включая все необходимые импортные.Теперь CSS не применяется.Может кто-нибудь дать мне знать, что стилистика переопределяет стили материала.Как использовать оригинальные стили, предоставляемые angular / bootstrap для текстовых полей и кнопок.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NavigationComponent } from './navigation/navigation.component';
import { CostShareComponent } from './cost-share/cost-share.component';
import { PenaltyComponent } from './penalty/penalty.component';
import {RouterModule, Routes} from "@angular/router";
import {CustomMaterialModule} from "./core/material.module";
import {ContractService} from './service/contract.service';
import { HttpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbdModalContent } from './app-modal.component';

const appRoutes: Routes = [
  { path: '', component: CostShareComponent, data: { title: 'Cost Share' } },
  { path: 'cost-share', component: CostShareComponent, data: { title: 'Cost Share' } },
  { path: 'penalty', component: PenaltyComponent, data: { title: 'Penalty' } }
];

@NgModule({
  declarations: [
    AppComponent,
    NavigationComponent,
    CostShareComponent,
    PenaltyComponent,
    NgbdModalContent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(
      appRoutes,
      { useHash: true }
      ),
    CustomMaterialModule
  ],
  providers: [ContractService],
  bootstrap: [AppComponent],
  entryComponents: [NgbdModalContent],
})
export class AppModule { }

xyz.component.html

<div class="container" style="background-color: lightblue;">
    <br/><h1 style="text-align: center;">
      Cost Share Conditions
    </h1><br/>
    <br/>
  <form *ngIf="addForm" [formGroup]="addForm" (ngSubmit)="onSubmit()">
  <div *ngIf="successMessage" class="alert alert-success">
      <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
      <strong>Success!</strong> {{successMessage}}
    </div>
    <div *ngIf="errorMessage" class="alert alert-danger">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
      <strong>Error!</strong> {{errorMessage | json}}
    </div>
    <table>
  <thead></thead>
  <tbody>
  <tr>
    <td>
      <input type="text" name="contractId" ng-model="contractId" style="display: none;"/>
    </td>
     <td>
     <div class="form-group col-xs-6">
        <label for="contractName">Contract Name:</label>
        <input formControlName="contractName" placeholder="Contract Name" class="form-control" name="contractName" id="contractName">
     <!--  <div *ngIf="submitted && f.contractName.errors" class="invalid-feedback">
                              <div *ngIf="f.contractName.errors.required">Contract Name is required</div>
                          </div> -->
                      </div>
     </td>
     <td>
   <div class="form-group col-xs-6">
       <h4 style="margin-left:100px;">Penalty Conditions</h4>
      </div>
  </td>  
  </tr>
  </tbody>
  </table>
  <div formArrayName="contractServiceList">
  <div *ngFor="let items of contractList.controls; let i=index" 
              [formGroupName]="i">
  <table>
  <thead></thead>
  <tbody>
  <tr> 
  <td>
      <div class="form-group col-xs-6">
        <label for="serviceId">Category Of Services:</label>
        <select id ="serviceId" [(ngModel)]="serviceId" formControlName="serviceId" name="serviceId" class="form-control">
      <option value="1">Emergency Room</option>
      <option value="2">OP Radiology</option>
  </select>
        </div>
      </td>
  <td>
   <div class="form-group col-xs-6">
        <label for="penaltyApplies">Penalty Applies:</label>
         <select id ="penaltyApplies" formControlName="penaltyApplies" name="penaltyApplies" class="form-control">
      <option>Y</option>
      <option>N</option>
  </select>
  </div>
  </td>
  </tr>
  <tr>
      <td>
      <div class="form-group col-xs-6">
        <label for="copay">Copay Amount:</label>
        <input formControlName="copay" placeholder="Copay Amount" class="form-control" name="copay" id="copay">
      <!-- <div *ngIf="submitted && addForm.controls.contractServiceList.controls[i].controls.copay.errors" class="invalid-feedback">
                              <div *ngIf="addForm.controls.contractServiceList.controls[i].controls.copay.errors.required">Copay is required</div>
                          </div> -->
      </div>
      </td>
      <td>
      <div class="form-group col-xs-6">
        <label for="penaltyRule">Penalty Rule:</label>
         <select id ="penaltyRule" formControlName="penaltyRule" name="penaltyRule" class="form-control">
      <option>Non Emergency ER Use</option>
  </select>
        </div>
      </td>
      </tr>
  <tr>
      <td>
      <div class="form-group col-xs-6">
        <label for="deductibleApplies">Deductible Applies:</label>
          <select id ="deductibleApplies" formControlName="deductibleApplies" name="deductibleApplies" class="form-control">
      <option>Y</option>
      <option>N</option>
  </select>
  </div>
      </td>
      <td>
      <div class="form-group col-xs-6">
        <label for="penaltyType">Penalty Type:</label>
        <select id ="penaltyType" name="penaltyType" formControlName="penaltyType" class="form-control">
      <option>Coinsurance</option>
      <option>Dollar Amount</option>
  </select>
  </div>
      </td>
      </tr>
      <tr>
      <td>
      <div class="form-group col-xs-6">
        <label for="coinsurance">CoInsurance:</label>
        <input formControlName="coinsurance" placeholder="Coinsurance" name="coinsurance" class="form-control" id="coinsurance">
      </div>
      </td>
      <td>
      <div class="form-group col-xs-6">
        <label for="penaltyValue">Penalty Value:</label>
        <input formControlName="penaltyValue" placeholder="Penalty Value" name="penaltyValue" class="form-control" id="penaltyValue">
      </div>
      </td>
      </tr>
      <tr>
      <td></td>
      <td>
      <div class="form-group col-xs-6">
        <label for="deductibleAppliesPenalty">Deductible Applies:</label>
        <select id ="deductibleAppliesPenalty" name="deductibleAppliesPenalty" formControlName="deductibleAppliesPenalty" class="form-control">
      <option>Y</option>
      <option>N</option>
  </select>
      </div>
      </td>
      </tr>
  </tbody>
    </table>
    </div>
    </div>
    <div class="form-row text-center">
      <div class="col-12">
      <button class="btn btn-success" [disabled]="!addForm.valid">Save</button>
      <button style="margin-left: 20px" class="btn btn-success" (click)="onReset()">Reset</button>
      </div>
      </div>
    </form>
    <br/><br/>
    <br/>
  </div>