Я использую угловой материал 2.

В материале CSS есть один стиль CSS:

.mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: #fff;
}

Я попытался переопределить его в пользовательском файле CSS, как:

.mat-radio-button.mat-accent .mat-radio-inner-circle {   background-color: red !important; }

Также я пробовал это:

/deep/ .mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: red !important;
}

Не получается, как это правильно сделать и в каком месте?

4
OPV 20 Авг 2018 в 16:45

3 ответа

Лучший ответ

Вы делаете это в своей глобальной таблице стилей (style.scss) или в любой таблице стилей, которая не инкапсулирована.

Чтобы переопределить, возьмите селектор, проверив HTML-элемент в вашем браузере, и переопределите желаемое свойство.

Если по-прежнему происходит сбой, вы можете использовать !important для принудительного применения стиля.

Не забудьте также заказать импорт таблиц стилей в свой файл angular.json (спасибо @SurenSrapyan за напоминание)

8
user4676340user4676340 20 Авг 2018 в 13:47

Лучше всего переопределить другой файл CSS, чтобы сделать его более конкретным. И они будут работать везде.

Вот ссылка на блог, чтобы подробно изучить специфику CSS: https://medium.com/@kastor012/the- базовое руководство к CSS - специфичность b89726c0c0bc

Также как если вы хотите переопределить вас над кодом, т.е.

.mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: #fff;
}

Затем вы должны добавить свой класс в элемент или родительский элемент к нему. и напишите указанный CSS, чтобы переопределить его как:

.my__parent__class .mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: #fff;
}

OR

.my__element__class.mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: #fff;
}
1
Nikhil Paliwal 22 Июл 2019 в 07:55

В угловом файле конфигурации вам нужно импортировать ваши стили после материализации стилей

5
Suren Srapyan 20 Авг 2018 в 13:47
51932134