gpt4 book ai didi

angular - 我如何以自己的方式设置 Angular 10 Material Select(和其他)的样式

转载 作者:行者123 更新时间:2023-12-04 08:52:59 24 4
gpt4 key购买 nike

我正在尝试为我的 angular material 下拉菜单赋予自己的风格。我正在使用 Angular 10。我做了很多研究,尝试了很多我可以在 Stackoverflow 和其他人上找到的东西,但是当我从互联网上复制方法时,我的 mat-select 的风格没有改变。这是我当前的代码:

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
}
<mat-form-field appearance="fill">
<mat-label>Umkreis</mat-label>
<mat-select panelClass="test" [(ngModel)]="selectedRadius" name="radius">
<mat-option *ngFor="let radius of radiusList" [value]="radius.value">
{{radius.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>

有人可以提示我如何设置下拉菜单的样式吗?如果我使用来自 Angular Material 的其他组件,这会在任何地方都一样吗?
先感谢您!

最佳答案

您必须使用 ::ng-deep CSS 中的选择器。
例如:

::ng-deep .mat-select-panel {
background: red; // also background-color does not work
}
不过小心, ::ng-deep强制样式通过子组件树进入所有子组件 View ,根据官方文档,这种方式已被弃用。
您可以找到更多信息 here

关于angular - 我如何以自己的方式设置 Angular 10 Material Select(和其他)的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63998395/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com