Не могу переопределить тему материала angular с помощью моих свойств css

Я использую 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 с арабский класс изменит Цвет шрифта содержащихся полей формы материала, но это не так (как первое поле с Sushi, шрифт не изменяется)

Это очень важно, поскольку все элементы заключены в div с ngClass, который имеет английский или арабский язык, и я хочу применить класс ко всем вложенным элементам, включая поля формы материала.

2- Как изменить цвет всех меток формы с синего на красный или зеленый?

Вам просто нужно убедиться, что ваше правило более конкретное, чем материальные правила.

David 10.09.2018 10:56
4
1
9 339
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Обычно, когда я работал с библиотеками стилей материалов, они стилизованы с очень высокой степенью специфичности. Если вы проверите элементы в своем браузере, вы увидите порядок применения стилей. Как и здесь, вы увидите, что некоторые свойства перезаписываются из-за более указанных свойств выше.

example

Посмотрите, не отошли ли ваши стили слишком далеко в очереди приоритетов. Если их вообще нет, то с импортом что-то не так.

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

Ahmed Elkoussy 10.09.2018 12:48

Не уверен, что вы полностью достигли конечной цели, но похоже ли это на решение, которое вы ищете? Посмотрите строку 67-70 в CSS: stackblitz.com/edit/angular-jwztdt?file=src/styles.css

Kristoffer Lund 10.09.2018 13:08

спасибо за вашу помощь, это действительно работает, но это плохо разбивает выпадающие списки, так как метка отображается в них дважды при использовании !important, и без нее никаких изменений не происходит

Ahmed Elkoussy 10.09.2018 21:58
Ответ принят как подходящий

Пожалуйста, ознакомьтесь с этим минимальный пример (мне пришлось настроить семейство шрифтов, чтобы этот пример работал).

Вы перезаписываете некоторые определения стиля шрифта. Либо определите семейство шрифтов, размер и вес отдельно, как в следующем скорректированном определении .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;
}

Редактировать

Чтобы ответить на ваш комментарий / отредактированный вопрос:

I find the font in the computed values but it is striked through and not applied, it is only applied if I apply the class specifically on the mat-form field

Вы должны явно применить класс к .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
}

Но я думаю, это не очень хорошо. Лучшим решением было бы создать два настраиваемая тема, по одному для каждого языка, и установить там цвета и шрифты. Таким образом, ваши определения цвета и шрифта будут автоматически применяться к вложенным элементам. Это руководство - хорошее чтение, касающееся пользовательских тем.

Обновлено еще раз: угловая тематика материала

Как упоминалось в моем предыдущем редактировании, создание пользовательских тем может быть лучшим решением вашей проблемы. Пользовательские темы в материалах angular довольно эффективны, однако сначала вам нужно настроить их немного. После этого нужно всего лишь несколько строк настроить цвет, шрифты и т. д.

Я создал новый stackblitz, где вы можете увидеть настройку стандартной и двух пользовательских тем, а также настройку цвета и шрифтов в поле формы материала. Я прокомментировал каждый раздел, но также кратко объясню здесь:

Общая структура вашего styles.scss должна быть следующей:

  • импорт необходимых примесей углового материала
  • определение шрифтов
  • определение / импорт тем пользовательских компонентов
  • определение темы по умолчанию
  • определение всех других настраиваемых тем

После того, как вы импортировали @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);. Теперь, если вы хотите применить конфигурацию шрифта только к определенной настраиваемой теме, вам нужно добавить конфигурацию шрифта в определение темы.

Тема определяется следующей структурой: определите желаемые основные цвета и тему с помощью миксина 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.

Последним шагом для выполнения вашего стиля является определение темы настраиваемого компонента, которая стилизует поля формы-мат по желанию. Теперь это вопрос нескольких строк:

@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).

Вот и все. Если вам нужно настроить больше компонентов, вам просто нужно создать собственную тему для этого компонента и добавить ее в миксин custom-components-theme.

Большое спасибо за ваше объяснение, я использовал ваш пример stackblitz, чтобы прояснить мою проблему, также у меня есть шрифт, определенный в другой таблице стилей, которая применяется успешно, я нахожу шрифт в вычисленных значениях, но он зачеркнут и не применяется, он применяется только в том случае, если я применяю класс специально к полю матовой формы, пожалуйста, проверьте мой обновленный вопрос для получения подробной информации

Ahmed Elkoussy 10.09.2018 12:47

@AhmedElkoussy Я соответствующим образом скорректировал свой ответ :)

coreuter 10.09.2018 13:44

Большое спасибо за вашу помощь :), но код ломается, если я использую его для двух языков, я уверен, что должен быть способ перезаписать основной цвет и шрифт акцента, который проще, чем этот

Ahmed Elkoussy 10.09.2018 22:10

@AhmedElkoussy Я ответил на ваш комментарий в своем ответе. Попробуйте новый stackblitz и дайте мне знать, решит ли это вашу проблему.

coreuter 11.09.2018 09:04

Большое спасибо за потрясающий ответ! Я решил это, но он не был полностью совместим с темой материала, и когда я попробовал ваш ответ, он сработал блестяще (думал, что это трудно понять, если честно, как вы сказали :))

Ahmed Elkoussy 11.09.2018 21:39

Я блуждал по пустыне, пока не наткнулся на это предложение в вашем ответе «вы всегда должны быть по крайней мере столь же конкретными, как уже существующее определение стиля».

Magnus 10.02.2020 03:36

Если вы пытаетесь переопределить стиль Angular Material, вы можете сделать это с помощью глубокий

параметр перед ним так:

::ng-deep .mat-step-header .mat-step-icon {
  background-color: #f6871f;
}

Другие вопросы по теме