如何自定义 ember-bootstrap 组件？答案

【问题标题】：How to customize ember-bootstrap components?如何自定义 ember-bootstrap 组件？
【发布时间】：2019-09-16 15:57:29
【问题描述】：

我是学习 Ember 的新手，除了我在模板方面遇到了一点问题之外，它大多是有意义的。

我的模型检索一个记录数组，我想在一个可折叠的引导手风琴中显示每条记录。有一个原生 ember-bootstrap 组件 (BsAccordion) 似乎让这变得超级简单，但它包含一些我不想使用的样式。

我的模板很简单，看起来像这样：

<BsAccordion as |list|>
  {{#each mail as |message|}}
    <list.item @value={{message.id}} @title="{{message.sender.firstName}} {{message.sender.lastName}}: {{message.subject}}">
      {{{message.content}}}
    </list.item>
  {{/each}}
</BsAccordion>

我遇到的问题是它用 class="card" 将每条消息包装在一个 div 中，我不希望使用引导程序的卡片布局。如何自定义组件并防止它这样做？

【问题讨论】：

标签： ember.js bootstrap-4 ember-bootstrap

【解决方案1】：

card 类名应用于addon/components/bs4/bs-accordion/item.js 文件。请参阅v3.0.0-rc.0 和master。

要覆盖此文件，请在您的应用中定义 app/components/bs-accordion/item.js，并使用与原始文件中相同的内容进行覆盖，但省略不需要的类。

【讨论】：