Я использую Angular 6.0.8
с Angular Material theme
версии 6.4.0
Всякий раз, когда я пытаюсь немного изменить тему материала, это никогда не срабатывает, поскольку я всегда нахожу, что свойства темы материала перезаписывают мои свойства CSS следующим образом:
currentColor .mat-input-element (material theme)
initial input, textarea, select, button (user agent stylesheet)
#1072BA .English
#1072BA .English
#1072BA body
Применяется только первое свойство (остальные зачеркнуты)
Я пробовал несколько вариантов решения этой проблемы, но ни один из них не работал (например, использование важных или изменение порядка импорта тем)
Итак, как правильно изменить мелочи в теме материала и пользовательской таблице стилей? (например, чтобы применить это английское правило)
Мой styles.scss выглядит следующим образом, он хорошо работает только то, что переопределяет тему материала, например, цвета и шрифты, не работают:
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
/* You can add global styles to this file, and also import other style files */
/* prevent clicking in the wizard nav header */
.mat-horizontal-stepper-header{
pointer-events: none !important;
}
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(./assets/material_icons/material_icons.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.mat-radio-button{
margin: 10px;
}
.mat-checkbox{
margin-bottom: 10px;
}
.Done-numbers{
color: red;
font-weight: bold;
}
.finInfo-hint{
color: gray;
}
.finInfo-success{
color: green;
}
.Arabic {
font-family: "AXtManal" !important;
margin: 0;
/* background: #fff; */
font: normal 16px/20px Verdana;
color: #1072BA;
text-shadow: 0 0 0 #1072BA;
}
.English {
font-family: "Rotis" !important;
margin: 0;
/* background: #fff; */
font: normal 16px/20px Verdana;
color: #1072BA;
text-shadow: 0 0 0 #0078be;
}
Обновление 1:
Ознакомьтесь с этим примером stackblitz, проблема очень ясна в этом
1. Я ожидаю, что включающий div с арабским классом изменит шрифт и цвет содержащихся полей формы материала, но это не так (как первое поле с Суши, шрифт не изменен)
Это очень важно, поскольку все элементы заключены в div с ngClass, который имеет английский или арабский язык, и я хочу применить класс ко всем вложенным элементам, включая поля формы материала.
2- Как изменить цвет всех меток формы с синего на красный или зеленый?