Angular Material和MaterializeCSS碰撞 [英] Angular Material and MaterializeCSS Collision

问题描述

我想在利用Materialize CSS的实用程序(文本颜色，版式，按钮...)的同时使用Angular Material的组件. 但是，看起来这两个库不能同时使用. 如果我尝试包括Angular Material和Materialize(仅css文件)，则样式看起来就坏了.

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.

现在我正在考虑它，即使每个库需要的HTML也有所不同(我在说的是最终编译的html). 有谁知道如何克服这个问题? 我使用Angular v4.0，最新的angular-cli，最新的angular-material并实现了最新版本.

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.

谢谢！

推荐答案

我已经成功使用了两者.将材质用于导航栏，按钮等，并将材质化用于滑块(作为轮播)，选择等.我不得不重置一些过于笼统，导致冲突或命名不正确的Materialize CSS样式. .white{ background-color: white; } ...一个不幸的选择.其中一个materialize.js版本也存在问题，其中插件中的滑块组件损坏.对于这个特定的项目，我使用的是Minko的Angular seed ，但是它应该可以在CLI中工作.以下版本适用于我.物化CSS加载Roboto字体；不需要独立加载.

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

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

package.json

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

project.config.ts

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

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

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

这篇关于Angular Material和MaterializeCSS碰撞的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！