material-ui 相关问题

我有一个 mat-chip-set 和几个带有自定义产品芯片类的 mat-chip 对象：我有一个 mat-chip-set 和几个带有自定义 mat-chip 类的 product-chip 对象： <mat-chip-set> <mat-chip class="product-chip" *ngFor="let category of categories"> {{category}} </mat-chip> </mat-chip-set> 我的CSS是： .product-chip { background-color: pink !important; color: white !important; } 结果是芯片背景颜色是我想要的粉红色，但文字颜色仍然是黑色。如何将 mat-chip 对象的文本颜色设为白色？参见 StackBlitz 示例：https://stackblitz.com/edit/angular-nzhkmg?file=src/app/chips-overview-example.html 我会编辑使用的变量。 style.css .mat-mdc-standard-chip { --mdc-chip-label-text-color: #fff; } 此外，检查其他选项的作用，以在芯片处于其他状态（禁用）时保持样式一致。 .mat-mdc-standard-chip { --mdc-chip-elevated-container-color: #e0e0e0; --mdc-chip-elevated-disabled-container-color: #e0e0e0; --mdc-chip-label-text-color: #fff; --mdc-chip-disabled-label-text-color: #212121; --mdc-chip-with-icon-icon-color: #212121; --mdc-chip-with-icon-disabled-icon-color: #212121; --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #212121; --mdc-chip-with-trailing-icon-trailing-icon-color: #212121; --mdc-chip-with-icon-selected-icon-color: #212121; } 示例：https://stackblitz.com/edit/angular-nzhkmg-dk3hsm?file=src%2Fstyles.scss 您可以创建一个指令，将文本和背景颜色作为输入，例如如下： chip-theme.directive.ts： import { Directive, ElementRef, Input, OnInit } from '@angular/core'; type ChipTheme = { backgroundColor: string; color: string; }; @Directive({ selector: '[appChipTheme]', }) export class ChipThemeDirective implements OnInit { @Input('appChipTheme') theme: ChipTheme; constructor(private el: ElementRef) {} ngOnInit(): void { const natEl = this.el.nativeElement; const { color, backgroundColor } = this.theme; // Background Color natEl.style.backgroundColor = backgroundColor; // Text Color natEl.style.setProperty('--mdc-chip-label-text-color', color); } } 然后在 HTML 模板中使用如下： <mat-chip *ngFor="let chip of chips" [appChipTheme]="{ color: chip.color, backgroundColor: chip.bgColor }"> <span>{{ chip.text }}</span> </mat-chip> 不要忘记在 app.module.ts 中导入指令。

angular material-ui angular-material

回答 2 投票 0

在触发 onClick 事件时无法将焦点设置在 Material UI 中的工具提示组件的内容上，但可以在触发 onKeyPress 事件时

我在自定义的 TooltipComponent 中使用 MUI 中的 Tooltip 组件。 TooltipComponent 的工作方式与 Dialog 类似：用户可以在单击（而不是悬停）元素（div 与...

reactjs material-ui onclick focus onkeypress

回答 3 投票 0

MUI TextField 自动完成背景颜色

我有一个使用 React.js 和 Material UI 构建的应用程序，并且对自动完成字段的背景颜色有问题。它添加了不必要的白色背景。但是当我手动添加文本时，...

javascript reactjs material-ui

回答 2 投票 0

Pigment CSS 包装器

我正在尝试围绕 @pigment-css/react 的样式函数创建包装函数。我不会打扰您有关我的包装器的详细信息，因此我将提供最简单的包装器，只是为了