相关疑难解决方法(0)

我为我的应用程序使用了多个菜单，并为此使用了角形材料垫菜单组件。我可以通过在菜单原始类的全局 css 文件中编写 css 代码来更改所有菜单的样式。但是当我想使用 .custom-class-name .original-material-class-name{} 添加一些特定样式到其中之一时，它不会将这些样式应用于该菜单。

这是 stackblitz 中的整个应用程序：

header.component.html：

<div>\n<a mat-button class="theme-menu-toggle-button" *ngIf="!menuAvailable" \n(click)="changeSidenavMode(!mode)">\n  <mat-icon>menu</mat-icon>\n</a>\n<a href="#" fxHide.lt-md fxShow.gt-sm class="theme-user" mat-button \n[matMenuTriggerFor]="menu">\n  <img src="assets/images/user.png" class="theme-profile-image rounded-circle">\n  <span class="theme-profile-title">\xd9\x86\xd8\xa7\xd9\x85 \xd9\x86\xd8\xa7\xd9\x85\xe2\x80\x8c\xd8\xae\xd8\xa7\xd9\x86\xd9\x88\xd8\xa7\xd8\xaf\xda\xaf\xdb\x8c</span>\n</a>\n<mat-menu #menu="matMenu" class="profile-menu">\n  <button mat-menu-item *ngFor="let option of profileOptions">\n    <mat-icon>{{option.icon}}</mat-icon>\n   <span>{{option.title}}</span>\n  </button>\n</mat-menu>\n

样式.css：

.profile-menu .cdk-overlay-pane::before{\n width: 0;\n height: 0;\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n border-bottom: 15px solid #5E35B1;\n content: " ";\n position: absolute;\n top: 10px !important;\n animation: fadeInRightBig 0.75s;\n}\n

我尝试将背景颜色设置为 angular2 的 ngb-pagination 项目，但不起作用。

<ngb-pagination style="background-color:gray;" [collectionSize]="120" [(page)]="page" [maxSize]="5" [boundaryLinks]="true">

谢谢你。

我正在 angular 6 中创建一个应用程序（我计划将它迁移到 ng7），并且在其中一个组件中需要添加 2 个元素，ng 材料的 textarea 和我的自定义组件。每个都应占可用高度的 50%。我对 textarea 有问题，因为生成的 mat-form-field-wrapper 只占用它需要的空间，我无法在该元素中实现我的目标（我不想使用任何 ::ng-deep 解决方案作为不推荐）

这是我到目前为止所做的（当然是样本）：

<form [formGroup]="myGroup" fxLayout="column" fxLayoutAlign="center stretch" fxFlex="1 1 100%">
  <mat-form-field fxFlex="1 1 100%" fxLayout="column" fxLayoutAlign="start stretch">
    <textarea matInput formControlName="myControl" fxFlex="1 1 100%"></textarea>
  </mat-form-field>
</form>

<my-custom-component *ngIf="somevariable" [variable]="somevariable"></my-custom-component>

我有使用Angular Material Select的html结构

<mat-form-field class="year-drpdwn-vacay-stock">
    <mat-select placeholder="Year">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let yr of year"  [value]="yr">{{yr}}</mat-option>
    </mat-select>
</mat-form-field>

我放置了一个类，因为我还在其他组件中使用了Select。我尝试添加

::ng-deep .mat-select-panel {
    margin-top: 20%; 
} 

在CSS中进行自定义，但是问题是，包含另一个选择框的其他组件也会受到影响（继承了margin-top CSS）

目前我有这个CSS

.year-drpdwn-vacay-stock mat-select.mat-select :host ::ng-deep .mat-select-panel {
    margin-top: 20%; 
}

但这仍然行不通。

更新

目标：打开选择框后，我希望选项面板向下移动一点，这就是为什么我希望.mat-select-panel最高利润为20％

我试图使材质菜单中的滚动条消失，但我似乎无法做到这一点。

就像现在一样：

正如我希望的那样：

我已经尝试过此处和此处提出的解决方案，但没有成功。

我知道我必须在 css 中设置的选项是，overflow: hidden;但是当我将其放入组件 css 中时，这似乎不起作用。

我尝试将该选项设置为.mat-menu-panel,.mat-menu甚至使用自定义类，但它不起作用。

我的 html 看起来像这样：

<mat-table [dataSource]="dataSource">\r\n\r\n      <ng-container matColumnDef="employee_name">\r\n        <th mat-header-cell *matHeaderCellDef class="rest"> Nombre </th>\r\n        <td mat-cell *matCellDef="let element"> {{element.employee_name}}</td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef="date">\r\n        <th mat-header-cell *matHeaderCellDef class="rest"> Fecha </th>\r\n        <td mat-cell *matCellDef="let element"> {{element.date | date:\'yyyy-MM-dd\'}}</td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef="duration">\r\n        <th mat-header-cell *matHeaderCellDef class="rest"> Duraci\xc3\xb3n </th>\r\n        <td mat-cell *matCellDef="let element"> {{element.duration}}</td>\r\n …

我正在尝试自定义角度材料 mat-form-field ：我能够使用以下方法自定义下划线边框：

::ng-deep.mat-form-field-ripple {
  background-color: yellow;
}

现在我正在尝试将禁用状态下的下划线边框自定义为实线而不是虚线：

我试过这个，但它对下划线不起作用：

::ng-deep.mat-form-field-disabled
 {

 }

我希望它在禁用状态下呈灰色实心

 <mat-form-field>
    <input matInput placeholder="Input" [disabled]='true'>
  </mat-form-field>

在我们的项目中，我们使用了角材料进行开发。我们使用 ::ng-deep覆盖了角度材质样式来自定义 CSS 属性。

使用 ::ng-deep 时，声纳报告中出现“意外的未知伪元素选择器 ::ng-deep”错误。

在 ::ng-deep 团队尝试使用父类（ mat-input-underline.mat-form-field-underline ）和使用 customstyle.scss 文件覆盖属性，但它没有按预期工作。

只是想知道这个问题是否有任何替代解决方案，或者我们是否应该在声纳指标中跳过此规则。有人请就此提出建议吗？

参考

用什么来代替 ::ng-deep

我正在尝试自定义 MatButtonToggle，但难以将标签居中：

模板：

<mat-button-toggle-group name="condition" aria-label="Condition">
  <mat-button-toggle value="and" checked>
    <div>ET</div>
  </mat-button-toggle>
  <mat-button-toggle value="or">OU</mat-button-toggle>
</mat-button-toggle-group>

样式 ：

.mat-button-toggle-checked {
  background-color: $secondary-color;
  color: white;
}

mat-button-toggle-group {
  height: 25px;
  border-radius: 4px;
  border: solid 1px $secondary-color;
}

mat-button-toggle {
  font-size: 15px;
  background-color: white;
  color: $secondary-color;
}

我怎样才能做到这一点 ？

你好，我在使用 Angular 4 和 Bootstrap 4 时遇到问题。当我单击打开以显示日历时。它显示在我的模态后面。我想更改其类的 z-index，但我无权访问该类，因为它是自动生成的。我该如何解决这个问题？ 这是我的代码。 提前致谢。

我想知道是否有办法为已禁用的 Mat-Expansion-Panel 设置样式。我在标题中有按钮并且与它们交互会切换面板，所以我相信最好只用按钮切换面板并禁用面板本身。

但是，当我禁用面板时，面板内的所有项目都会变灰。有没有办法删除禁用样式或覆盖它们？