Angular игнорирует класс стиля, установленный для меньшего количества файлов - PullRequest
Новая
       10

Angular игнорирует класс стиля, установленный для меньшего количества файлов

0 голосов
/ 19 июня 2019

По какой-то причине мое приложение Angular не использует стили, которые я определяю в файле .less моего компонента. Он просто игнорирует это.

Поскольку я очень новичок в CSS, я никак не могу отладить его.

Мой макет состоит из множества определенных стилей, импортируемых другими файлами меньшего размера. Я использую попытки изменить стиль mapboxgl.

Вот так выглядит текущая карта:

enter image description here

И это определяется в HTML следующим образом: 

<div eds-tile class="column xl-3">
    <eds-tile-title>Location</eds-tile-title>
    <eds-tile-actions>
        <div class="action">
            <eds-icon icon="maximize">
            </eds-icon>
        </div>
    </eds-tile-actions>
    <div class="map" id="map"></div>
</div>

На этот компонент меньше у меня: 

@import "~@eds/vanilla/variables/light";
@import (reference) "~@eds/vanilla/font/styles";
@import (reference, multiple) "~@eds/vanilla/variables/global";
@import "./map/map";

И на ./map/map.less у меня много стилизации темы: https://pastebin.com/b8CpakH9

Моя проблема в том, что есть некоторые классы, которые действительно используются Angular, как этот: 

.map {
  min-height: 200px;
  width: 100%;
  height: 100%;

  a {
    color: @text;
  }
}

enter image description here

Но другие не такие, как это (вы можете видеть на изображении ниже, что нет ничего связанного с этим определением при проверке стилей браузера): 

.mapboxgl-ctrl-bottom-left {
  display: none !important;
}

enter image description here

Что происходит с моим делом?

Я следую другому примеру, что он работает нормально. В файле component.less он использует: 

@import (reference) "~@eds/vanilla/font/styles";

.dark {
  @import "~@eds/vanilla/variables/dark";
  @import (multiple) "./map/map";
}
.light {
  @import "~@eds/vanilla/variables/light";
  @import (multiple) "./map/map";
}

И файл map.less такой же, за исключением значения min-height.

Пример:

enter image description here

Вы можете ясно видеть, что в этом примере он использует ".light .map {}" для установки стиля. Это отличается от моего случая, который почему-то конвертируется в «.map [_ng-content-c5] {}». Я понятия не имею, что это значит.

Извините, что так расплывчато в описании проблемы. Просто потому, что у меня недостаточно опыта, чтобы даже назвать это.

1 Ответ

1 голос
/ 19 июня 2019

Мне кажется, я знаю, в чем проблема.

Если вы откроете сгенерированный файл CSS, вы увидите, что нет .mapboxgl-ctrl-bottom-left {

Вместо этого вы увидите что-то вроде: .mapboxgl-ctrl-bottom-left[_ngcontent...] {

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

Вы можете контролировать, инкапсулированы ли стили с помощью ViewEncapsulation

Скорее всего, это происходит потому, что содержимое (в данном случае карта) отображается с помощью JS послеDOM загружен и не обрабатывается самим angular, поэтому он не получает атрибутов.Без дополнительной информации я не смогу вам помочь, так как не знаю всех деталей.Я не знаю точно, какую карту вы используете, возможно, есть учебник о том, как каким-то образом интегрировать ее с angular.

...