Question

我想在利用Materialise CSS的实用程序（文本颜色，排版，按钮......）的同时使用Angular Material的组件。但是，看起来两个库都无法相互协作。如果我尝试包含Angular Material和Materialize（仅限css文件），则样式看起来会破碎。

现在我正在考虑它，即使每个库需要的HTML也不同（我当然是在讨论最终编译的html）。有谁知道怎么克服这个？我使用Angular v4.0，最新的angular-cli，最新的角度材料和物化最新版本。

谢谢！

Answer 1

我成功使用了两者。使用材料导航栏，按钮等和Materialize for slider（作为旋转木马），选择等等。我不得不重置一些过于概括，导致碰撞或没有良好命名ex的Materialise CSS样式。 .white{ background-color: white; } ......一个不幸的选择。还有一个materialize.js版本的问题，其中滑块组件在插件中被破坏。对于这个特定的项目，我在Minko的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;
    }

角度材料和物化CSS碰撞

1 个答案: