Не применяется тема к angular2-multiselect-dropdown в коде Angular

Question

Я только что добавил AngularMultiSelectModule из следующего URL

https://www.npmjs.com/package/angular2-multiselect-dropdown

Я получил раскрывающийся элемент управления с месяцами года, но тема не применяется, как показано на демонстрационной странице.

Я прочитал, что нужно добавить файл default.theme.css. Я скопировал и вставил содержимое CSS в файл углового компонента .scss, но по-прежнему их не было. Я даже скопировал файл default.theme.css в папку, и он все еще не работает.

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

Вот мой код. Любая помощь приветствуется. Спасибо.

HTML:

TS:

this.dropdownList = [
      {"id":1,"itemName":"January"},
      {"id":2,"itemName":"Febuary"},
      {"id":3,"itemName":"March"},
      {"id":4,"itemName":"April"},
      {"id":5,"itemName":"May"},
      {"id":6,"itemName":"June"},
      {"id":7,"itemName":"July"},
      {"id":8,"itemName":"August"},
      {"id":9,"itemName":"September"},
      {"id":10,"itemName":"October"},
      {"id":11,"itemName":"November"},
      {"id":12,"itemName":"December"}
    ];
    this.selectedMonths = this.dropdownList;

    this.dropdownSettings = { 
          singleSelection: false, 
          text:"Select Months",
          selectAllText:'Select All',
          unSelectAllText:'UnSelect All',
          enableSearchFilter: true,
          classes:"myclass custom-class"
        };    

Я скопировал следующее из default.theme.css в мой component.scss

.c-btn {
  background: #fff;
  border: 1px solid #ccc;
  color: #333; }

.selected-list .c-list .c-token {
  background: #0079FE; }
  .selected-list .c-list .c-token .c-label {
    color: #fff; }
  .selected-list .c-list .c-token .c-remove svg {
    fill: #fff; }

.selected-list .c-angle-down svg, .selected-list .c-angle-up svg {
  fill: #333; }

.dropdown-list ul li:hover {
  background: #f5f5f5; }

.arrow-up, .arrow-down {
  border-bottom: 15px solid #fff; }

.arrow-2 {
  border-bottom: 15px solid #ccc; }

.list-area {
  border: 1px solid #ccc;
  background: #fff;
  box-shadow: 0px 1px 5px #959595; }

.select-all {
  border-bottom: 1px solid #ccc; }

.list-filter {
  border-bottom: 1px solid #ccc; }
  .list-filter .c-search svg {
    fill: #888; }
  .list-filter .c-clear svg {
    fill: #888; }

.pure-checkbox input[type="checkbox"]:focus + label:before, .pure-checkbox input[type="checkbox"]:hover + label:before {
  border-color: #0079FE;
  background-color: #f2f2f2; }

.pure-checkbox input[type="checkbox"] + label {
  color: #000; }

.pure-checkbox input[type="checkbox"] + label:before {
  color: #0079FE;
  border: 2px solid #0079FE; }

.pure-checkbox input[type="checkbox"] + label:after {
  background-color: #0079FE; }

.pure-checkbox input[type="checkbox"]:disabled + label:before {
  border-color: #cccccc; }

.pure-checkbox input[type="checkbox"]:disabled:checked + label:before {
  background-color: #cccccc; }

.pure-checkbox input[type="checkbox"] + label:after {
  border-color: #ffffff; }

.pure-checkbox input[type="radio"]:checked + label:before {
  background-color: white; }

.pure-checkbox input[type="checkbox"]:checked + label:before {
  background: #0079FE; }

.selected-item {
  background: #e9f4ff; }

.btn-iceblue {
  background: #0079FE;
  border: 1px solid #ccc;
  color: #fff; }

Answer 1

Сайт поручает добавить в файл angular.json, который у меня не сработал. Я добавил в глобальный файл style.scss, и он работал.