在Angular代码中，没有主题应用于angular2-multiselect-dropdown

Question

我刚从下面的url添加了AngularMultiSelectModule

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

我用一年中的月份填充了dropdown控件，但没有应用演示页面上显示的主题。

我读到需要添加default.theme.css。我将css内容复制并粘贴到angular组件.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文件中，它起作用了。