![](/img/trans.png)
[英]How to provide custom colors to "mat-fab, mat-fab-mini, mat-button" | Angular material
[英]Trouble shooting Material styles not loading on mat-button Angular 7?
我使用ng new
创建了一个应用程序,并使用ng add @angular/material
添加了 Material。 当我运行ng serve
尽管在我的angular.json
但我没有看到加载了材料 style.css
"architect": {
"build": {
"options": {
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
...
我还缺少什么? 当我查看 chrome dev 控制台时,我看到它正在加载
content_scripts.css
frontend.css
shadow.css
一个 css 用于字体( fonts?family..
)和一个用于图标icon?family..
我还尝试将以下内容添加到我的styles.scss
中,
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
这也导致没有引入额外的 css 文件。
对我来说,我创建的按钮没有样式。 我实际上是从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
语句。
请从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">
让我知道它是否起作用,或者您还需要其他什么。
如果文件angular.json
设置正确,请检查您的组件属性color
设置是否正确,即
<mat-component color="primary">
我在 Angular 12 中遇到了类似的问题。我在 App Module 中导入了 MaterialModule,但这并没有应用颜色。 所以我通过在 Angular 项目的 style.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';
希望上述解决方案对某人有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.