material-design 相关问题

我在我的 Angular 应用程序中使用 mat-select。我想改变文字颜色，但颜色没有改变。我在 Angular 应用程序中使用 mat-select。我想改变文字颜色，但颜色没有改变。 <mat-select style="color: red" [(ngModel)]="someValue"> <mat-option>class="empty-select"</mat-option> <mat-option class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option> </mat-select> 我可以毫无问题地更改背景颜色，但文本颜色不会更改。您需要在 mat-option 而不是 mat-select 上应用样式，如下所示： <mat-select [(ngModel)]="someValue"> <mat-option class="empty-select"></mat-option> <mat-option style="color: red" class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option> </mat-select> 您还可以在课堂上设置颜色not-empty-select。更新1：如果您想更改所选选项的颜色，请添加以下 CSS： .not-empty-select.mat-selected { color: green !important; } 更新2：如果您想更改选择框中的颜色，请将 CSS 修改为： .not-empty-select.mat-selected { color: green !important; } :host /deep/ .mat-select-value-text { color: green !important; } 如果仔细检查 mat-select-value 是在 mat-select 标签中保存占位符字体的 css 的类；所以使用 ::ng-deep .mat-select-value{ color: white!important; } 将应用您指定的颜色。 !重要的是覆盖默认值。您可以将以下元素的 css 覆盖为 - 选择框面板 /deep/ .mat-select-panel { background-color: red; } 选择框选项元素 /deep/ .mat-form-field-infix{ background-color: red; } 选择框 /deep/ .mat-select{ background-color: red; } 不要忘记添加/deep/，如上所述。选择框文本颜色如果您想更改选择的文本颜色，请使用此选项。 /deep/ .mat-form-field-type-mat-select .mat-form-field-label, .mat-select-value { color: red; } 演示副本在这里 - https://stackblitz.com/edit/angular-material-pagination-123456-5teixy 将其添加到您的 styles.css 文件中 .mat-select-red .mat-select-value{ color: red !important; } 在你的 component.html 文件中 <mat-select class="mat-select-red" [(ngModel)]="someValue"> <mat-option>class="empty-select"</mat-option> <mat-option class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option> </mat-select> ::ng-deep .mat-select-arrow { display: none !important; } 它对我有用 <mat-select [(ngModel)]="someValue"> <mat-option style="color: red" >class="empty-select"</mat-option> <mat-option style="color: red" class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option> </mat-select> option appearance (legacy, standard, fill, outline) <mat-form-field appearance="legacy"> <mat-label>Choose an option</mat-label> <mat-select> <mat-option value="option1">Option 1</mat-option>... </mat-select> </mat-form-field> 假设您有此选择： <mat-form-field appearance="fill"> <mat-label>The label</mat-label> <mat-select> <mat-option value="This">This</mat-option> <mat-option value="That">That</mat-option> </mat-select> </mat-form-field> 显示如下：要仅设置颜色样式，请尝试以下操作： ::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple { background-color: red; } ::ng-deep .mat-form-field.mat-focused .mat-form-field-label { color: red; } ::ng-deep .mat-form-field.mat-focused.mat-primary .mat-select-arrow{ color: red; } ::ng-deep .mat-primary .mat-option.mat-selected:not(.mat-option-disabled){ color: red; } 产生这适用于 Angular 11.2.0、Angular Material 11.2.0。这帮助我更改了所选文本的样式： ::ng-deep .mat-selected .mat-option-text { color: white!important; } 如果您需要从变量设置 mat-option 的颜色，您应该：在mat-select中设置panelClass： panelClass="继承颜色"> 设置CSS规则： .inherit-color .mat-option { 颜色：继承！重要； } 将 mat-option 包裹在 span 中并在其中设置样式： {{一些}}

css angular material-design

回答 10 投票 0

Angular 6 Material <mat-select>使用表单控件设置多个默认值

我正在使用表单控件，这是我的 html 组件的代码我正在使用表单控件，这里是我的 html 组件的代码 <mat-form-field> <mat-select placeholder="Toppings" [formControl]="toppings" multiple> <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping.value}}</mat-option> </mat-select> </mat-form-field> 我的 ts 文件是 export class SelectMultipleExample { toppings = new FormControl(); toppingList: any[] = [ { id:1,value:"test 1"}, { id:2,value:"test 2"}, { id:3,value:"test 4"}, { id:4,value:"test 5"}, { id:5,value:"test 6"}, { id:6,value:"test 7"} ]; constructor(){ this.bindData(); } bindData(){ const anotherList:any[]=[ { id:1,value:"test 1"}, { id:2,value:"test 2"} ] this.toppings.setValue(anotherList) } } 我想为 mat select 设置默认值，任何帮助如何实现这一点都会很棒。我想设置多个默认值。问题是由于你的选项是对象。为了应用选择，所选对象必须与选项中使用的对象相同。按如下方式修改您的代码： export class SelectMultipleExample { toppings = new FormControl(); toppingList: any[] = [ { id:1,value:"test 1"}, { id:2,value:"test 2"}, { id:3,value:"test 4"}, { id:4,value:"test 5"}, { id:5,value:"test 6"}, { id:6,value:"test 7"} ]; constructor(){ this.bindData(); } bindData() { const anotherList: any[] = [ this.toppingList[0], this.toppingList[1] ] this.toppings.setValue(anotherList) } } <mat-form-field> <mat-label>Select Global Markets</mat-label> <mat-select [formControl]="globalmarketCategory" multiple > <mat-option *ngFor="let list of toppingList" [value]="list">{{list.value}}</mat-option> </mat-select> export class SelectMultipleExample { globalmarketCategory= new FormControl(); toppingList: any[] = [ { id:1,value:"test 1"}, { id:2,value:"test 2"}, { id:3,value:"test 4"}, { id:4,value:"test 5"}, { id:5,value:"test 6"}, { id:6,value:"test 7"} ]; list = [] constructor(){ const anotherList:any[]=[ { id:1,value:"test 1"}, { id:2,value:"test 2"} ] this.globalmarketCategory.setValue(anotherList); } } 您可以使用 compareWith 的 mat-select 属性。查看答案https://stackoverflow.com/a/57169425/1191125 使用多个时使用compareWith函数。所以 HTML 看起来像这样 <mat-form-field> <mat-select [compareWith]="compareFn" [(ngModel)]="theArrayofSelectedValues"> <mat-option *ngFor="let obj of listOfObjs" [value]="obj"> {{ obj.name }} </mat-option> </mat-select> </mat-form-field> 在 TS 中比较Fn compareFn(o1: any, o2: any) { if(o1.id == o2.id ) return true; } G给出的答案。 Tranter 给出了正确答案。根据他们的回答，我创建了以下更详细的示例（可能更接近此功能的实际实现）： toppings.html: <mat-form-field> <mat-label>Select Your Favorite Topping(s)</mat-label> <mat-select placeholder="Select Topping(s)" [formControl]="ToppingsControl" required multiple> <mat-option *ngFor="let t of AllToppings" [value]="t">{{t.Name}}</mat-option> </mat-select> </mat-form-field> toppings.ts： import { Component } from '@angular/core'; import { FormControl, Validators } from '@angular/forms'; import ITopping from 'src/app/interfaces/topping-dto'; @Component({ selector: 'toppings', templateUrl: './toppings.html', styleUrls: ['./toppings.css'] }) export default class SelectMultipleExample { protected ToppingsControl: FormControl<Array<ITopping>> = new FormControl(null, Validators.required); protected AllToppings: Array<ITopping> = []; public constructor() { // These values can be injected, pulled from a database, etc. this.AllToppings.push({ Id: 1, Name: 'Sprinkles' }); this.AllToppings.push({ Id: 2, Name: 'Hot Fudge' }); this.AllToppings.push({ Id: 3, Name: 'Whipped Cream' }); this.AllToppings.push({ Id: 4, Name: 'Crushed Nuts' }); this.AllToppings.push({ Id: 5, Name: 'Maraschino cherries' }); // Get a reference to the objects that are initially selected by default let selectedToppings: Array<ITopping> = [ this.AllToppings[0], this.AllToppings[1] ]; // Set the value of the control to be the selected objects this.ToppingsControl.setValue(selectedToppings); } } topping-dto.ts: interface ITopping { Id: number, Name: string } export default IClientDto;

angular angular-material material-design form-control

回答 5 投票 0

如何正确从Material Design TextInputLayout获取文本？

我想使用自定义结束图标从材料设计的 TextInputLayout 中获取文本。我尝试这样做： TextInputLayout textInputCustomEndIcon = findViewById(R.id.editText); 最终的 TextInputEdi...

android material-design android-textinputlayout android-textinputedittext

回答 6 投票 0

材质 3 colorSchemeSeed 并具有纯黑白主题

使用 Material 3，colorSchemeSeed 可用于设置整个应用程序的颜色。这适用于红色、蓝色和绿色等颜色。如果保留默认值，颜色将为紫色。当尝试使用 bl...

flutter material-design

回答 3 投票 0

更改 TextInputEditText 提示样式

我想更改 TextInputEditText 类型 FilledBox 当输入提示需要粗体样式和颜色#FF0000（红色）之前当输入提示样式常规和颜色#000000（黑色）后我该怎么办

android material-design android-textinputedittext

回答 1 投票 0

java.lang.NoSuchFieldError：类中没有类型 I 的字段 $stable

尝试导航到使用材质运动的片段时出现以下错误。使用的版本：科特林 1.5.10 撰写 Beta 09 材质1.4.0-rc01 片段1.3.5 AGP 7.0.0-beta03（有...

android android-fragments material-design android-jetpack-compose

回答 5 投票 0

特定色调的材料设计 3 (MD3) 颜色代码

Material Theme Builder 可以生成 MD3 调色板，但它不提供表面容器的颜色代码（例如 N-96、N-94、N-92 等），我可以在其中找到以下颜色代码他们？

colors material-design

回答 1 投票 0

material-design 相关问题

最新问题