疑难解答 Material 样式未在 mat-button Angular 7 上加载？

Question

我使用ng new 创建了一个应用程序，并使用ng add @angular/material 添加了材料。当我运行ng serve 时，尽管在我的angular.json 中，但我看不到加载了材质 style.css

"architect": {
  "build": {                                                         
    "options": {
      "styles": [                                                    
        "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",                                                                     
        "src/styles.scss"                                            
      ],                                                             
  ...                           

我还缺少什么？当我查看 chrome 开发控制台时，我看到它正在加载

• content_scripts.css
• frontend.css
• shadow.css

还有一个用于字体 (fonts?family..) 的 css 和一个用于图标的 icon?family..

---

我还尝试将以下内容添加到我的styles.scss，

@import "~@angular/material/prebuilt-themes/indigo-pink.css"; 

这也导致没有引入额外的 css 文件。

Answer 1

对我来说，我创建了没有样式的按钮。我实际上是从menu 上的文档中复制了这个例子。我没有意识到示例中的按钮需要的不仅仅是 API 选项卡中记录的按钮。否则，他们只与，

import {MatButtonModule} from '@angular/material/button';

因此，当我在我的应用程序的 module.ts 中运行该导入并将其添加到我的 imports 数组中时，它起作用了。至于为什么手动包含带有<link> 元素的样式不起作用，我在尝试时遇到以下错误：

拒绝应用来自 'http://localhost:4200/node_modules/@angular/material/prebuilt-themes/indigo-pink.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。

至于styles.scss 中的@import，如果有的话，它似乎是Angular 7 的NOP

@import "~@angular/material/prebuilt-themes/indigo-pink.css"; 

如果您还在 angular.json 中配置了它。现在一切正常，没有任何地方的@import 声明。

• Doc bug opened here

Answer 2

请从 angular.json 中删除 css 导入并将其放入您的 styles.scss 文件中。

所以它看起来像这样。

angular.json

"architect": { "build": { ... "styles": [ "src/styles.scss" ], ... },

styles.scss

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

如果您对上一行有疑问，请将以下几行添加到 styles.scss

@import '~@angular/material/theming'; // Plus imports for other components in your app. // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // Be sure that you only ever include this mixin once! @include mat-core(); // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. Available color palettes: https://material.io/design/color/ $candy-app-primary: mat-palette($mat-indigo); $candy-app-accent: mat-palette($mat-pink, A200, A100, A400); // The warn palette is optional (defaults to red). $candy-app-warn: mat-palette($mat-red); // Create the theme object (a Sass map containing all of the palettes). $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. @include angular-material-theme($candy-app-theme);

我只是从文档中粘贴它。

您也可以通过以下代码将其添加到 index.html

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

让我知道它是否有效或您需要其他任何东西。

Answer 3

我在 Angular 12 中遇到了类似的问题。我在 App Module 中导入了 MaterialModule，但没有应用颜色。所以我通过在Angular项目的styles.scss文件中包含以下css文件导入来修复它。 @import '~@angular/material/prebuilt-themes/purple-green.css';

所以这里是完整的解决方案：

material.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatBadgeModule } from '@angular/material/badge';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatDialogModule } from '@angular/material/dialog';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatDividerModule } from '@angular/material/divider';


@NgModule( {
  imports: [
    CommonModule,
    BrowserAnimationsModule,
    MatCheckboxModule,
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatBadgeModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatDividerModule
  ],
  exports: [
    MatCheckboxModule,
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatBadgeModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
  ],
  providers: [
    MatDatepickerModule,
  ]
} )

export class MaterialModule { }

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module'; // For Angular Material support
import { FlexLayoutModule } from "@angular/flex-layout"; // For Angular Flex layout

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

styles.scss

@import '~@angular/material/prebuilt-themes/purple-green.css';

希望上述解决方案对某人有所帮助。

Answer 4

如果文件angular.json 设置正确，请检查您的组件属性color 设置是否正确，即

<mat-component color="primary">