有没有一种无需样式即可使用Angular Material的方法？

Question

我的公司目前使用Angular Material来设置输入，按钮等的样式。我们正转向另一种样式，但Id仍然喜欢使用精美的组件，如Datepicker，Prefix，Suffix等。

是否可以使用我们自己的自定义样式来使用材质组件？

随附的是Datepicker与我们的新样式的图片。我们希望日期选择器采用我们的新样式，摆脱所有的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 {...}

穿透角形材料类。

祝你好运！很多尝试和错误，但是可行！

注意：请注意，应用的样式是带有'more'选择器的样式...因此，如果您在检查中看到.mat-button.mat-primary .mat-button-wrapper {}，请不要简单地尝试覆盖.mat-button-wrapper，因为它没有足够的特异性，您需要使用材料的特异性加上您自己的材料的特异性来覆盖现有的材料。

Answer 2

尽管正如其他人所指出的，可能，但作为开发工作，这可能需要更多的努力，并且比简单地转向其他事情更容易出现问题。提供足够的测试覆盖范围以确保您正确完成了所有任务将非常困难，以免某些事情突然在生产中浮出水面。

如果您确实要执行此操作，请在@ angular / material项目中创建自己的fork（或只是窃取源代码），然后重写所有样式代码以适合您的需求。