Есть ли способ использовать угловой материал без стайлинга? - PullRequest
Новая
       38

Есть ли способ использовать угловой материал без стайлинга?

0 голосов
/ 01 марта 2019

Моя компания в настоящее время использует Angular Material для стилей ввода, кнопок и т. Д. Мы переходим к другому стилю, но я все еще хотел бы использовать такие модные компоненты, как Datepicker, Prefix, Suffix и тому подобное.

Есть ли способ использовать компоненты материала с нашим собственным стилем?

Приложено изображение DatePicker против нашего нового стиля.Мы бы хотели, чтобы средство выбора даты приняло наш новый стиль, избавившись от всех стилей Материал.

enter image description here

Вот пример различных типов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>

Ответы [ 2 ]

0 голосов
/ 02 марта 2019

Хотя возможно , как указали другие, в качестве усилия по разработке это, вероятно, потребует больше усилий и будет более склонным к проблемам, чем просто переход к чему-то другому.Было бы крайне сложно обеспечить достаточное покрытие тестами, которое могло бы гарантировать, что вы сделали все должным образом, чтобы что-то внезапно не привело к появлению уродливой головы в производстве.

Если вы действительно хотитеДля этого создайте свой собственный форк проекта @ angular / material (или просто украдите исходный код) и переписайте весь код стиля в соответствии с вашими потребностями.

0 голосов
/ 01 марта 2019

вы можете добавить стили к классам, которые использует Angular Material (проверьте их с помощью inspect в браузере Chrome) в вашем файле styles.scss или в любом другом имеющемся у вас файле глобальных стилей.

Если вы хотите изменить их вКаждый компонент вы можете создать родительский класс, а затем проникнуть в классы угловых материалов, используя ::ng-deep .my-class .mat-button .mat-button-wrapper {...}

удачи!это много проб и ошибок, но выполнимо!

примечание: имейте в виду, что применяются стили с селекторами 'more' ... так что если вы видите .mat-button.mat-primary .mat-button-wrapper {} в своей проверке, не делайте 'просто попробуйте переопределить .mat-button-wrapper, потому что у него недостаточно специфичности, вам нужно использовать специфику материала плюс свою собственную, чтобы переопределить тот, который на месте.

...