角度材质和MaterialiseCSS碰撞

我想使用Angular Material的组件，同时利用Materialise CSS的实用工具（文字颜色，排版，按钮...）。然而，它看起来像两个库不能彼此协作。如果我尝试包含Angular Material和Materialize（仅限于css文件），则样式看起来很糟糕。角度材质和MaterialiseCSS碰撞

现在我正在考虑它，甚至每个库所需的HTML都是不同的（我正在谈论最终编译的html）。有谁知道如何克服这一点？我使用Angular v4.0，最新的角度cli，最新的角度材料和物化最新版本。

谢谢！

来源

2017-04-02 Matan Reuven

我成功使用了两者。使用材质的导航栏，按钮等和物化滑块（作为旋转木马），选择等。我不得不重置一些物化CSS样式，这些样式过于笼统，造成了冲突，或者没有命名为ex。 .white{ background-color: white; } ...不幸的选择。另外还有一个materialize.js版本的问题，其中滑块组件在插件中被损坏。对于这个特定的项目，我在Minko的Angular seed上，但它应该在CLI中工作。下面的版本适用于我。实现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; 
    }

来源

2017-04-02 23:55:28 Dan

角度材质和MaterialiseCSS碰撞

回答

相关问题