Как мне настроить стили в Angular Material Input?

Question

Я работаю с внештатным клиентом на стороне, которая хочет использовать Angular Material на протяжении всего проекта.Однако им не нравится, как подчеркивание выглядит при вводе углового материала.Я испробовал множество подходов, чтобы изменить это, но пока не добился успеха.

Если честно, я даже не смог найти тег в DOM, который позволил бы мне изменитьэта граница.

Здесь - документы по угловому материалу, поскольку вы можете видеть, что все доступные опции имеют, по крайней мере, некоторую форму нижней границы.

Некоторые подходы Iпопробовал:

• Этот из старого углового материала и больше не работает для нового углового материала
• Принятый ответ здесь для нового углового материала, но я не смог заставить его работать.Я реализовал в точности так, как описано, и стиль не изменился.
• Этот подход выглядел так, как будто он будет работать.К сожалению, я не смог заставить его работать.

Буду признателен за любую помощь или комментарии по этой теме.

Для справки, клиент сказал, что любые изменения, отличающиеся от желаемого дизайна, будут отклонены.Так что я должен заставить это работать.Я полагаю, что мог бы, возможно, лоббировать создание пользовательского компонента ввода в качестве решения, но я знаю, что они не установлены в Angular Material.

Редактировать.Добавлена ​​картинка желаемого вида:

Answer 1

Прежде всего, вам понадобится импортировать файл .scss либо внутри стандартной темы theme.scss, либо после импорта таблицы стилей материала в main.scss.

Теперь Материал предлагает вам возможность настраивать цвета и некоторые стили, переопределяя их @mixins, найденные где-то в папке "Материал" (у меня нет папки передо мной, очень жаль за нечеткое указание ...)

Вернуться к вновь добавленному файлу; Вы можете переопределить стилистику материала по умолчанию, проверив DOM для определенных классов, а затем добавив их в указанный файл с желаемыми изменениями. Поскольку файл загружается после Material, стиль по умолчанию переопределяется. То же самое относится к @mixin, который вы выбрали для переопределения. Просто посмотрите в файл, скопируйте и вставьте весь @mixin и измените его соответствующим образом.

Теперь, если вы хотите пойти еще дальше, у меня и моих коллег есть специальная библиотека, в которой используется материал, НО весь стиль удаляется, оставляя вас с медвежьим входом внутри группы mat-form-group, а затем с помощью <input disabled/> с position:absolute над ним. Таким образом, вы получаете выгоду от материала, не используя их стиль.

Answer 2

этот маленький код сделал это для меня.Я не хотел отображать его и просто установил высоту и ширину равными 0.

::ng-deep .mat-form-field-underline{
height:0 !important;
width:0  !important;
}

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