子组件不继承任何样式，ngx-手风琴

Question

我正在尝试将ngx-accordion库集成到我的应用程序中。我创建了一个名为AccordionComponent的组件，该组件在模板here的指导下使用模板中的<accordion>标签。为了测试组件。我将组件标签添加到我的一个视图（<app-accordion>）中，但是由于某种原因，它没有显示任何面板，只是一个纯文本位于另一个视图之下。我以为该组件可能有问题，因此我将模板直接添加到视图中，但无济于事。

按照本教程的指示，我还向AccordionModule添加了app.module.ts，但没有任何变化。我不确定为什么这行不通。

accordion.component.html

<accordion>
  <accordion-group heading="About me">
    Its all about me.
  </accordion-group>
  <accordion-group heading="Contacts">
    This is content of the contacts
  </accordion-group>
  <accordion-group heading="Map">
    Content of the Map
  </accordion-group>
  <accordion-group>
    <accordion-heading>
      Custom heading
    </accordion-heading>
    Its all about me.
  </accordion-group>
</accordion>

Accordion.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-accordion',
  templateUrl: './accordion.component.html',
  styleUrls: ['./accordion.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class AccordionComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

styles.scss（全局样式文件）

/* You can add global styles to this file, and also import other style files */
//import bootstrap style
@import '~bootstrap/dist/css/bootstrap.min.css';
//import coreui style
@import "~@coreui/coreui/scss/coreui.scss";

//import component styles
@import "src/app/views/login/login.component.scss";
@import "src/app/views/logout/logout.component.scss";
@import "src/app/views/main/main.component.scss";
@import "src/app/views/knowledge-base/knowledge-base-list/knowledge-base-list.component.scss";
@import "src/app/components/table/table.component.scss";
@import "src/app/views/knowledge-base/knowledge-base-create/knowledge-base-create.component.scss";

//import icons
@import "~@coreui/icons/css/coreui-icons.css";
@import "~flag-icon-css/css/flag-icon.css";
@import "~simple-line-icons/css/simple-line-icons.css";

// bootstrap style toast
@import '~ngx-toastr/toastr-bs4-alert.scss';

// import datatables
@import "~datatables.net-dt/css/jquery.dataTables.css";

//custom style
app-sidebar-nav{
  margin-top: 60px;
}
app-sidebar{
  height: 100%;
}

查看我要将组件导入到的位置

<div>
  <app-toolbar></app-toolbar>
  <app-side-nav></app-side-nav>
  <div class="container-fluid">
    <div class="card-group">
      <div class="card p-4">
        <form [formGroup]="kbForm">
          <app-button description="{{ 'pages[knowledge_base][buttons][go_back]' | translate }}" class="btn btn-danger btn-md custom" (callFunction)="goBack()"></app-button>
          <h2 class="col-md-6">{{ 'pages[knowledge_base][create][heading]' | translate }}</h2>
          <div class="col-md-3">
            <div #f1 class="input"></div>
            <div #f2 class="input"></div>
            <div #f3 class="input"></div>
          </div>
          <div class="col-md-6">
            <div #f4 class="input"></div>
          </div>
          <app-button description="{{ 'pages[knowledge_base][buttons][submit]' | translate }}" class="btn btn-success btn-md custom" (callFunction)="postDataToServer()"></app-button>
        </form>
        <app-accordion></app-accordion>
      </div>
    </div>
  </div>
</div>

编辑，这是显示的内容：