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.

谢谢！

推荐答案

我成功地使用了两者.将 Material 用于导航栏、按钮等，将 Materialize 用于滑块(作为轮播)、选择等.我不得不重置一些太笼统、导致冲突或名称不明确的 Materialize CSS 样式..white{ 背景色:白色；} ...一个不幸的选择.插件中的滑块组件损坏的 materialize.js 版本之一也存在问题.对于这个特定项目，我使用 Minko 的 Angular seed，但它应该可以在 CLI 中工作.以下版本对我有用.Materialise 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

<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

/* 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屋！