Angular Material and MaterializeCSS Collision

问题

I want to use Angular Material's components while taking advantage of Materialize CSS's utilities (text colors, typography, buttons...). However, it looks like both libraries can't work along-side each other. If I try to include Angular Material and Materialize (only css file) the styles looks broken.

Now that I'm thinking about it, even the HTML that every library requires is different (I'm talking about the final-compiled html of course). Does anyone knows how to overcome this? I use Angular v4.0, latest angular-cli, latest angular-material and materialize latest version.

Thanks!

回答1:

I'm successfully using both. Using Material for navbar, buttons, etc. and Materialize for slider (as a carousel), selects, etc. I had to reset some Materialize CSS styles that were too generalized, caused collisions, or not well-named ex. .white{ background-color: white; } ... an unfortunate choice. Also had problems with one of the materialize.js versions where the slider component was broken in the plugin. For this particular project, I'm on Minko's Angular seed, but it should work in CLI. The versions below work for me. Materialize CSS loads Roboto font; not necessary to load independently.

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

来源：https://stackoverflow.com/questions/43174290/angular-material-and-materializecss-collision