javascript - 有没有办法在没有样式的情况下使用 Angular Material？

Question

我的公司目前使用 Angular Material 来设置输入、按钮等的样式。我们正在转向不同的样式，但我仍然喜欢使用 Datepicker、Prefix、Suffix 等奇特的组件。

有没有办法使用自定义样式的 Material 组件？

附件是日期选择器与我们新样式的对比图片。我们希望日期选择器采用我们的新样式，摆脱所有 Material 样式。

这是不同类型的 html 的示例:

//Material Input
            <mat-form-field floatLabel="always" class="dynamic-input" *ngIf="answer.isInput && !answer.isConditional">
                <span matPrefix *ngIf="answer.hasPrefix">{{answer.prefixText}}</span>
                <input matInput (blur)="answer.fireNewLead === true ? onTriggerNewLead() : null" [placeholder]="answer.placeholderText" [name]="answer.propertyKey" [ngModel]="object[answer.propertyKey]" (ngModelChange)="object[answer.propertyKey]=$event" type="text">
                <span matSuffix *ngIf="answer.hasSuffix">{{answer.suffixText}}</span>
            </mat-form-field>
            <mat-form-field floatLabel="always" class="dynamic-input" *ngIf="answer.isInput && answer.isConditional && returnConditionIsTrue(answer)">
                <span matPrefix *ngIf="answer.hasSuffix">{{answer.prefixText}}</span>
                <input matInput (blur)="answer.fireNewLead === true ? onTriggerNewLead() : null;" [placeholder]="answer.placeholderText" [name]="answer.propertyKey" [ngModel]="object[answer.propertyKey]" (ngModelChange)="object[answer.propertyKey]=$event" type="text">
                <span matSuffix *ngIf="answer.hasSuffix">{{answer.suffixText}}</span>
            </mat-form-field>

//Our Input
            <div class="input-wrapper" *ngIf="answer.isInput" [style.width]="((answer.width/100) * 50) + 'rem'">
                <input type="text" (blur)="answer.fireNewLead === true ? onTriggerNewLead() : null" [placeholder]="answer.placeholderText" [name]="answer.id" [(ngModel)]="responses[returnResponseIndex(answer)].value"  class="input-box normal-input-box" *ngIf="!answer.isConditional && !answer.isAddressSearch && !answer.isVehicleVIN">
                <input type="text" (blur)="answer.fireNewLead === true ? onTriggerNewLead() : null" [placeholder]="answer.placeholderText" [name]="answer.id" [(ngModel)]="responses[returnResponseIndex(answer)].value"  class="input-box normal-input-box" *ngIf="answer.isConditional && !answer.isAddressSearch && !answer.isVehicleVIN && returnConditionTrue(answer.conditionAnswerId ? returnResponseValue(responses[returnConditionResponseIndex(answer.conditionAnswerId)]) : null, answer.conditionValue)">
            </div>

Answer 1

您可以在 styles.scss 或您拥有的任何其他全局样式文件中向 Angular Material 使用的类添加样式(在 chrome 浏览器上检查它们)。

如果你想在每个组件中更改它们，你可以创建一个父类，然后使用 ::ng-deep .my-class .mat-button .mat-button-wrapper { ...

祝你好运!这是大量的试验和错误，但可行!

注意:请注意，所应用的样式是带有“更多”选择器的样式...所以如果您看到 .mat-button.mat-primary .mat-button-wrapper {}在你的检查中，不要简单地尝试覆盖 .mat-button-wrapper 因为它没有足够的特异性，你需要使用 Material 的特异性加上你自己的来覆盖地方。