Пожалуйста, ознакомьтесь с минимальным примером (мне пришлось настроить семейство шрифтов, чтобы этот пример работал).
Вы перезаписываете некоторые определения стиля шрифта. Либо определите ваше семейство шрифтов, -size и -weight отдельно, как в следующем скорректированном определении .Arabic:
.Arabic {
font-family: 'Shadows Into Light', cursive;
margin: 0;
/* background: #fff; */
font-size: 16px/20px;
font-weight: normal;
color: red;
text-shadow: 0 0 0 #1072BA;
}
Или задайте свойства шрифта с помощью краткого объявления, как в этом измененном примере:
.English{
margin: 0;
/* background: #fff; */
font: normal 16px/20px 'Pacifico', cursive;
color: green;
text-shadow: 0 0 0 #0078be;
}
Редактировать
Чтобы ответить на ваш комментарий / отредактированный вопрос:
Я нахожу шрифт в вычисленных значениях, но он вычеркнут и
не применяется, это применяется только если я применяю класс специально на
поле mat-form
Вы должны явно применить класс к .mat-form-field, если хотите изменить его, потому что в prebuilt-themes / indigo-pink.css он определен явно как
.mat-form-field{
font-size:inherit;
font-weight:400;
line-height:1.125;
font-family:Roboto, "Helvetica Neue",sans-serif
}
то же самое для цвета этикетки.
С помощью CSS вы всегда должны быть как минимум такими же конкретными, как уже существующее определение стиля.
Вы могли бы сделать это:
.Arabic .mat-form-field,.mat-form-field-appearance-legacy .mat-form-field-label,
.mat-input-element,.mat-form-field.mat-focused .mat-form-field-label{
font-family: 'Shadows Into Light', cursive;
margin: 0;
/* background: #fff; */
font-size: 16px/20px;
font-weight: normal;
color: red;
text-shadow: 0 0 0 #1072BA;
}
.Arabic .mat-form-field.mat-focused .mat-form-field-ripple{
background-color: red
}
Но это не очень хорошо, я думаю. Лучшим решением было бы создать две пользовательских темы s, по одной для каждого языка, и установить там цвета и шрифты. Таким образом, ваши определения цвета и шрифта будут применяться к вложенным элементам автоматически.
Это руководство - хорошее прочтение в отношении пользовательских тем.
РЕДАКТИРОВАТЬ 2: угловой материал материал
Как упоминалось в моем предыдущем редактировании, создание пользовательских тем может быть лучшим решением для вашей проблемы. Пользовательские темы в угловом материале довольно мощные, однако сначала нужно немного их настроить. После этого нужно всего лишь несколько строк, чтобы настроить цвет, шрифты и т. Д.
Я создал новый стек-блиц , где вы можете увидеть настройки по умолчанию и две пользовательские темы, а также настройку цвета и шрифтов поля материала-формы. Я прокомментировал каждый раздел, но я также кратко объясню здесь:
Общая структура вашего styles.scss должна быть:
- импорт необходимых угловых материалов mixins
- определение шрифтов
- определение / импорт тем пользовательских компонентов
- определение темы по умолчанию
- определение всех других пользовательских тем
После того, как вы импортировали @import '~@angular/material/theming';, вы можете начать настройку шрифтов (если хотите). Для этого вам просто нужно определить новый mat-typography-config например ::
$arabic-typography: mat-typography-config(
$font-family: '"Shadows Into Light", cursive'
);
$english-typography: mat-typography-config(
$font-family: '"Pacifico", cursive'
);
Чтобы применить те шрифты-конфигурации, которые вам нужны, и их к mat-core -миксину, который позаботится обо всем остальном: @include mat-core($english-typography);. Теперь, если вы хотите применить свой font-config к определенной пользовательской теме, вам нужно добавить свой font-config в определение темы.
Тема определяется следующей структурой: определите желаемые основные цвета и тему с помощью mat-light-theme-mixin. Чтобы применить тему, используйте @include angular-material-theme(<theme name>);
$app-primary: mat-palette($mat-indigo);
$app-accent: mat-palette($mat-amber, A200, A100, A400);
$app-warn: mat-palette($mat-red);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
@include angular-material-theme($app-theme);
Чтобы выполнить настройку нескольких тем, вы можете заключить определение темы в имя CSS-класса следующим образом:
.Arabic {
$arabic-primary: mat-palette($mat-orange);
$arabic-accent: mat-palette($mat-blue, A200, A100, A400);
$arabic-warn: mat-palette($mat-red);
$arabic-theme: mat-light-theme($arabic-primary, $arabic-accent, $arabic-warn);
@include mat-core($arabic-typography);
@include angular-material-theme($arabic-theme);
}
Теперь тема .Arabic применяется, только если ваши html-элементы являются потомками элемента с классом .Arabic. Кроме того, я добавил @include mat-core($arabic-typography);, который говорит движку темы просто применить $arabic-typography к $arabic-theme.
Последний шаг для создания стиля - определить тему компонента, которая стилизует поля mat-form по желанию. Теперь это вопрос нескольких строк:
@mixin my-custom-component($theme) {
// retrieve variables from current theme
$primary: map-get($theme, primary);
// style element
mat-form-field, .mat-form-field-appearance-legacy .mat-form-field-label {
color: mat-color($primary);
}
}
Затем эта тема пользовательского компонента добавляется в ваши пользовательские темы, добавляя строку @include custom-components-theme(<theme name>); к каждому определению темы. (custom-components-theme - небольшая вспомогательная функция. Подробнее об этом читайте в stackblitz).
Вот и все. Если вам нужно настроить больше компонентов, вам просто нужно создать собственную тему для этого компонента и добавить ее в mixin custom-components-theme.