Question

在项目中添加了两个框架materialize-css和angular-material，但是在角形材质组件中，样式从materialize中获得，并且覆盖了角形材质的样式。

在根style.css中：

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

问题：

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

此视图：

如何解决此冲突并设置主要的棱角材质样式？

版本：

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

完整样式的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);
}

Answer 1

我在这里在stackblitz上做了这个有角度的项目： http://stackblitz.com/edit/angular-1d323s

正在使用

角度6
角/材质6.4.0
materialize-css 1.0.0-rc.2

我使用了有角材料制成的组件，并且都实现了，但是没有问题...您能参考这个项目吗：http://stackblitz.com/edit/angular-1d323s

Answer 2

几天前，我重命名了我所有的stackblitz存储库，却忘了从这里更改它。这是我的旧答案，其中包含更新的链接：

我在stackblitz上做了这个有角度的项目：https://stackblitz.com/edit/materialize-input

正在使用

角度6 角形/材质6.4.0 materialize-css 1.0.0-rc.2 我使用了来自角形材料的组件，并且都实现了，但是没有问题...您可以参考这个项目：https://stackblitz.com/edit/materialize-input

冲突实现-CSS和@ angular / material主题

2 个答案: