Перезаписать свойство класса css для библиотечного компонента в Angular-5 - PullRequest
Новая
       19

Перезаписать свойство класса css для библиотечного компонента в Angular-5

0 голосов
/ 18 мая 2018

В моем коде есть выпадающий компонент angular-5 из сторонней библиотеки, у этого компонента есть собственный CSS, и из-за его поведения по умолчанию я не могу изменить его CSS (здесь я пытаюсь уменьшить ширину выпадающего меню)я попытался использовать другой класс CSS и встроенный стиль, но это не меняет ширину.

HTML-код, где я контролировал свой код: (сторонний выпадающий компонент) 

    <test-dropdown id="dropdown" label="Options Array"
              [selectedOption]="dropdownOptions[0]">
           <test-option *ngFor="let option of dropdownOptions"
              [option]="option" [disabled]="option.disabled">{{option.label}}  
           </test-option>
    </test-dropdown>

Выше выпадающего компонента, после запуска приложения вБраузер выглядит так: 

    <test-dropdown _ngcontent-c4="" id="dropdown" label="default" ng-reflect-label="default">
  <div class="test-dropdown" ng-reflect-ng-class="[object Object]">
    <label>DropDown</label>
    <div>
      <button class="select">Select...</button>
      <div class="dropdown">
        <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
  }-->
        <test-option _ngcontent-c4="" class="dropdown-btn-vp option ng-star-inserted" style="min-width: 120px"
                     ng-reflect-option="[object Object]">
          <button class="option">
            Option One
          </button>
        </test-option>
        <test-option _ngcontent-c4="" class="dropdown-btn-vp option ng-star-inserted" style="min-width: 120px"
                     ng-reflect-option="[object Object]">
          <button class="option">
            Option Two
          </button>
        </test-option>
        <!--bindings={}-->
      </div>
    </div>
  </div>
</test-dropdown>

Короче говоря, я хочу применить стиль CSS к классам, test-dropdown-> button.select и test-dropdown->div.dropdown

Ответы [ 3 ]

0 голосов
/ 18 мая 2018

Этот вопрос основан на Специфичность CSS : правила CSS имеют порядок, и если вы хотите, чтобы ваш стиль применялся, вам следует использовать правильные правила CSS.

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

Для этого есть несколько решений:

  1. Используйте идентификатор, указанный в раскрывающемся списке в файле CSS вашего компонента
  2. Проверьте свой компонент в браузере и используйте селекторы длявыберите его в своем глобальном файле CSS
  3. Используйте директиву ngStyle или только для одного свойства [style.property]="'value'"

РЕДАКТИРОВАТЬ

В вашем случае вы должны добавить свой стиль в глобальный CSS-файл, style.css (или любое другое расширение).Ваш селектор будет: 

test-dropdown#dropdown div.test-dropdown div button.select {}
0 голосов
/ 21 мая 2018

Я использовал ::ng-deep pseudo-class selector, ссылался на этот документ https://blog.angular -university.io / angular-host-context для инкапсуляции углового обзора.

Ниже фрагмент кода работает для меня, чтобы переписать свойство css с помощью ng-deep.Например, в моем случае <test-dropdown> является угловым компонентом, который принимает класс CSS по умолчанию .dropdown, теперь я хочу изменить свойство min-width, поэтому я сделал это с помощью селектора псевдокласса ng-deep, то же самое для другого углового компонента.. 

test-dropdown::ng-deep .dropdown {
  min-width: 20%;
}

test-button::ng-deep .test-button {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  text-align: center;
  cursor: pointer;
  min-width: 20%;
}

test-date-picker::ng-deep .date {
  min-width: 100%;
  line-height: 1.42857143;
}

test-date-picker::ng-deep .date-picker {
  min-width: 100%;
  line-height: 1.42857143;
}
0 голосов
/ 18 мая 2018

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

Можете ли вы показать сайт и код вашего класса CSS?будет проще отследить проблему в режиме разработчика Chrome и посмотреть, откуда у него стиль.

...