Стиль в angular6 компонентном CSS файле не работает - PullRequest
Новая
       7

Стиль в angular6 компонентном CSS файле не работает

0 голосов
/ 07 января 2019

Я использую angular6. Я включил файл bootstrap.css в папку src. Затем в мой angular.json я включаю все файлы CSS, которые я хочу

"styles": ["../node_modules/ol/ol.css", "src/bootstrap.min.css", "src/styles.css", "../node_modules/ol-geocoder/dist/ol-geocoder.min.css", "node_modules/font-awesome/css/font-awesome.css"] это стили для: openlayers, bootstrap, angular по умолчанию styles.css, модуль геокодера и font-awesome. Это отлично работает.

Я поместил стили CSS для общих элементов DOM (заголовок, заголовки и т. Д.) В styles.css, чтобы они были доступны везде. Это отлично работает.

Затем я подумал включить больше специфичных для компонента стилей в файлы component.css. Но это не работает. Если я поставлю, например 

.accordion .card:first-of-type form{
  display: block;
  width: 75%;
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

в styles.css, это отлично работает. Если я положу его в profile.component.css, он не будет работать. Компонент установлен как 

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})

Это как-то связано с теневым DOM или View Encapsulation? Что мне здесь не хватает?

Спасибо

1 Ответ

0 голосов
/ 08 января 2019

Пожалуйста, сначала подтвердите, работает ли другой код CSS в вашем компоненте или нет?

Если работает другой css, вы должны отметить все важные свойства в вашем файле component.css следующим образом: 

.accordion .card:first-of-type form {
   display: block !important;
   width: 75% !important;
   clear: both!important;
   margin-left: auto!important;
   margin-right: auto!important;
}

Надеюсь, это поможет вам!

...