アンギュラマテリアルとMaterializeCSS Collision

Question

マテリアライズCSSのユーティリティ（テキストの色、タイポグラフィ、ボタンなど）を活用しながら、アンギュラマテリアルのコンポーネントを使用したい。 しかし、両方のライブラリがお互いに一緒に働くことはできないようです。 アングル材とマテリアライズ（CSSファイルのみ）を含めると、スタイルが壊れて見えます。

私はそれについて考えています。すべてのライブラリで必要とされるHTMLも異なっています（最終的にコンパイルされたhtmlについてのことです）。 誰もこれを克服する方法を知っていますか？ 私はAngular v4.0、最新のangular-cli、最新のangle-materialとmaterializeの最新バージョンを使用します。

ありがとうございます！

Answer 1

私は正常に両方を使用しています。 navbar、buttonなどのマテリアルを使用し、スライダのマテラライズ（カルーセルとして）を選択するなど、あまりにも一般化された、衝突を引き起こした、またはあまり名を出さなかったマテリアライズCSSスタイルをリセットしなければなりませんでした。 .white{ background-color: white; } ...残念な選択です。また、プラグインでスライダコンポーネントが壊れていたmaterialize.jsバージョンのいずれかに問題がありました。この特定のプロジェクトでは、私はMinko's Angular seedですが、CLIで動作するはずです。以下のバージョンは私のために働く。 Materialize CSSはRobotoフォントを読み込みます。独立にロードする必要はありません。

index.htmlを

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
<!-- Roboto loaded by Materialize--> 
<!--<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">--> 
<!-- if css is not loaded, materialize.js crashes on style not found --> 
<link media="screen,projection" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"> 

package.json

"@angular/material": "^2.0.0-beta.1", 
"angular2-materialize": "^6.7.1", 
"materialize-css": "^0.97.8", 

project.config.ts

this.APP_ASSETS = [ 
    ...this.APP_ASSETS, 
    // ... 
    {src: `${this.NPM_BASE}/@angular/material/core/theming/prebuilt/indigo-pink.css`, inject: true, vendor: false}, 
    // ... 
    ]; 
this.addPackageBundles({ 
    name: '@angular/material', 
    path: `${this.NPM_BASE}@angular/material/bundles/material.umd.js`, 
}); 
this.addPackageBundles({ 
    name: 'angular2-materialize', 
    path: `${this.NPM_BASE}angular2-materialize/dist/index.js`, 
}); 
this.addPackageBundles({ 
    name: 'materialize-css', 
    path: `${this.NPM_BASE}materialize-css/dist/js/materialize.js`, 
}); 

app.module.ts

import 'angular2-materialize'; 
import { MaterializeModule } from 'angular2-materialize'; 
// https://github.com/mgechev/angular-seed/wiki/Integration-with-AngularMaterial2 
import { MaterialModule, MdIconRegistry } from '@angular/material'; 

@NgModule({ 
    imports: [ 
    ... 
    MaterializeModule, 
    MaterialModule.forRoot(), 
    ... 
    ], 

_reset.css

/* Materialize-CSS global resets */ 

/* other resets in component stylesheets to take advantage of Angular's css encapsulation */ 

input:not([type]), input[type=text], input[type=password], 
input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea { 
     background-color: white; 
     border: initial; 
     border-bottom: initial; 
     border-radius: initial; 
     outline: initial; 
     height: initial; 
     width: initial; 
     font-size: initial; 
     margin: initial; 
     padding: initial; 
     box-shadow: initial; 
     box-sizing: initial; 
     transition: initial; 
    } 

    nav { 
     color: initial; 
     background-color: initial; 
     width: initial; 
     box-shadow: initial; 
    } 

    nav ul a:hover { 
     background: initial; 
     background-color: initial; 
    }