CODEWITHSUNDEEP
angularmaterializeangular-material2
Pavel
Pavel

Reputation: 2101

Conflict materialize-css and @angular/material theme

In the project added two frameworks materialize-css and angular-material but in angular material components get the style from materialize and overriding styles of angular material.

In root style.css:

@import "~materialize-css/dist/css/materialize.min.css";
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Problem in :

<mat-form-field>
    <input placeholder="IP" matInput [(ngModel)]="vds.ip">
</mat-form-field>

This view:

enter image description here

How to resolve this conflict and set angular material styles always main?

Version:

Angular 6
angular/material 6.3.3
materialize-css 1.0.0-rc.2

Full style css:

@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);
}

Upvotes: 4

Views: 1366

Answers (1)

Immad Hamid
Immad Hamid

Reputation: 789

Few days back I renamed all my stackblitz repos and forgot to change it from here. Here's my old answer with the updated link:

I made this angular project on stackblitz here: https://stackblitz.com/edit/materialize-input

Which is using

Angular 6 angular/material 6.4.0 materialize-css 1.0.0-rc.2 I used components from angular material and materialize both but there are no issues... Can you please refer to this project: https://stackblitz.com/edit/materialize-input

Here's a github repo for this project: https://github.com/immad-hamid/materialize-input

Upvotes: 3

Related Questions