Question

我正在尝试为我的棱角材质下拉菜单提供自己的样式。我正在使用Angular10。我做了很多研究，尝试了很多我可以在Stackoverflow和其他产品上找到的东西，但是当我从互联网复制方法时，我选择的垫子的样式不会改变。这是我当前的代码：

using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Metadata.Profiles.Iptc;

public string NewPhotoCaption { get; set; }
public string NewPhotoDescription { get; set; }
public DateTime? NewPhotoDate { get; set; }

public async Task<IActionResult> OnPostLoadInfoAsync()
{
  if (ModelState.IsValid)
  {
    Image image = Image.Load(FormFile.OpenReadStream());
    List<IptcValue> nameValues = image.Metadata.IptcProfile.GetValues(IptcTag.Name);
    if (nameValues.Count > 0)
    {
     NewPhotoCaption = nameValues[0].Value;
    }      

    List<IptcValue> captionValues = image.Metadata.IptcProfile.GetValues(IptcTag.Caption);
    if (captionValues.Count > 0)
    {
      NewPhotoDescription = captionValues[0].Value;
    }

    string dateString;
    DateTime newPhotoDate;
    List<IptcValue> dateValues = 
      Image.Metadata.IptcProfile.GetValues(IptcTag.CreatedDate);
    if (dateValues.Count > 0)
    {
      dateString = dateValues[0].Value;
      if (DateTime.TryParseExact(
        dateString,
        "yyyyMMdd",
        CultureInfo.InvariantCulture,
        DateTimeStyles.None,
        out newPhotoDate))
      {
        NewPhotoDate = newPhotoDate;
      }
      else
      {
        NewPhotoDate = null;
      }
    }
    else
    {
      NewPhotoDate = null;
    }
   return Page();
}

import { Component, OnInit, ViewEncapsulation } from '@angular/core';


interface Radius {
  value: number;
  viewValue: string;
}

@Component({
  selector: 'app-landing-page',
  animations: [],
  templateUrl: './landing-page.component.html',
  styleUrls: ['./landing-page.component.scss'],

  encapsulation: ViewEncapsulation.None
})
export class LandingPageComponent implements OnInit { // The dropdown menu containing component
  // .....

  radiusList: Radius[] = [
    {value: -1, viewValue: "Nothing"},
    {value: 5, viewValue: "5km"},
    {value: 10, viewValue: "10km"},
    {value: 15, viewValue: "15km"},
    {value: 25, viewValue: "25km"},
    {value: 50, viewValue: "50km"},
    {value: 100, viewValue: "100km"},
  ]
  selectedRadius: Radius;
  
  
  // .....
}

// ---------------------------------
// app.module.ts

import {MatSelectModule} from '@angular/material/select'; 
// ...

@NgModule({
  declarations: [
    AppComponent,
    LandingPageComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,

    AppRoutingModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MatSelectModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

.test.mat-select-panel {
    background: red; // also background-color does not work
}

有人可以提示我如何设置下拉菜单的样式吗？如果我要使用Angular Material中的其他组件，是否会以同样的方式在任何地方使用？

提前谢谢！

Answer 1

只需将您的样式放在应用程序级别的styles.scss文件中

Answer 2

您必须在CSS中使用::ng-deep选择器。

例如：

::ng-deep .mat-select-panel {
    background: red; // also background-color does not work
}

但是请注意，::ng-deep将样式强制通过子组件树向下进入所有子组件视图，根据官方文档，此方法已弃用。

您可以找到更多信息here

如何以自己的方式设置Angular 10材质选择（及其他样式）的样式

2 个答案: