title: Conflict materialize-css and @angular/material theme
body: <p>In the project added two frameworks <a href="https://materializecss.com/getting-started.html" rel="noreferrer"><code>materialize-css</code></a> and <a href="https://material.angular.io/guide/customizing-component-styles" rel="noreferrer"><code>angular-material</code></a> but in angular material components get the style from <code>materialize</code> and overriding styles of angular material. </p>
  
  <p>In root <code>style.css</code>:</p>
  
  <pre><code>@import "~materialize-css/dist/css/materialize.min.css";
  @import "~@angular/material/prebuilt-themes/indigo-pink.css";
  </code></pre>
  
  <p>Problem in :</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;input placeholder="IP" matInput [(ngModel)]="vds.ip"&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>This view:</p>
  
  <p><a href="https://i.stack.imgur.com/t9nBV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/t9nBV.png" alt="enter image description here"></a></p>
  
  <p>How to resolve this conflict and set angular material styles always main?</p>
  
  <p>Version:</p>
  
  <pre><code>Angular 6
  angular/material 6.3.3
  materialize-css 1.0.0-rc.2
  </code></pre>
  
  <p>Full style css:</p>
  
  <pre><code>@import "~materialize-css/dist/css/materialize.min.css";
  @import "~@angular/material/prebuilt-themes/indigo-pink.css";
  
  .a-sidenav {
      transform: translateX(0) !important;
      width: 250px !important
  }
  
  .a-sidenav h4 {
      padding: 0 30px;
      opacity: .8;
      font-size: 2rem
  }
  
  .a-sidenav .bold.last {
      position: absolute;
      bottom: 62px;
      width: 100%
  }
  
  main, footer {
      margin-left: 250px
  }
  
  .content {
      padding: 0 30px
  }
  
  .m0 {
      margin: 0
  }
  
  .mr1 {
      margin-right: 10px
  }
  
  .mb2 {
      margin-bottom: 20px
  }
  
  .mb1 {
      margin-bottom: 10px
  }
  
  .p10 {
      padding: 10px !important
  }
  
  .pointer {
      cursor: pointer
  }
  
  .order-row {
      flex-wrap: wrap
  }
  
  .order-row .card {
      width: 50%;
      height: 70%;
      min-width: 175px;
      margin-right: 20px
  }
  
  .order-img {
      height: 100px !important
  }
  
  .frow {
      display: flex;
      margin-bottom: 20px;
      margin-left: auto;
      margin-right: auto
  }
  
  .page-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25px 0
  }
  
  .page-title a {
      color: black;
      opacity: .8
  }
  
  #create-modal {
      max-width: 500px
  }
  
  .page-subtitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0
  }
  
  .page-title h3, .page-title h4 {
      margin: 0;
      font-size: 2.3rem
  }
  
  .page-subtitle h4 {
      margin: 0;
      font-size: 2rem
  }
  
  .order-summary {
      display: flex;
      justify-content: flex-end;
      font-size: 20px;
      padding-right: 30px
  }
  
  .order-summary p {
      margin-bottom: 0 !important
  }
  
  .order-position-input {
      margin-top: 0;
      margin-bottom: 0
  }
  
  .order-position-input input {
      margin-bottom: 0 !important
  }
  
  .fr {
      display: flex;
      margin-bottom: 15px
  }
  
  .fr .col.order {
      width: 120px
  }
  
  .fr .col.filter-pickers {
      padding: 0 20px;
      width: 40%;
      display: flex
  }
  
  .fr .col.filter-pickers .input-field {
      width: 45% !important;
      min-width: 120px;
      margin-right: 20px !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important
  }
  
  .fr .col.range {
      width: 40%;
      padding-top: 44px
  }
  
  .filter {
      margin-bottom: 15px
  }
  
  .hide {
      display: none !important
  }
  
  .tap-target {
      background-color: #e0e0e0 !important
  }
  
  .btn-floating.tap-target-origin {
      background-color: #bdbdbd !important
  }
  
  .auth-block {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 50px
  }
  
  .auth-block .card {
      width: 400px
  }
  
  .nav-wrapper {
      padding-left: 20px
  }
  
  .collection-item-icon {
      display: flex !important;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      z-index: 10
  }
  
  .collection-item-icon i.material-icons:hover {
      color: #f44336 !important;
      transition: .3s color
  }
  
  .pl0 {
      padding-left: 0 !important
  }
  
  .average-price {
      padding: 15px 0;
      font-size: 20px
  }
  
  .analytics-block {
      width: 100%;
      height: 300px
  }
  
  .pb3 {
      padding-bottom: 30px
  }
  
  hr.style-four {
      height: 12px;
      border: 0;
      box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
  }
  </code></pre>