web-dev-qa-db-ja.com

Angular NebularスタイルはNbChatComponentには適用されません

進行中のangularプロジェクトがあり、Nebular Chat UIをプロジェクトに追加しようとしています。

Npmでnebularをインストールし、サイトに記載されているようにインポートを行いました。機能は期待どおりに機能していますが、スタイルはコンポーネントに適用されていません。

以下は私が従ったステップです。

  1. npm install --save @ nebular/theme @ angular/cdk @ angular/animations
  2. npm install --save @ nebular/eva-icons

  3. App.module.tsにインポートされたNbThemeModuleおよびNbChatModule

    import { NbThemeModule, NbChatModule } from '@nebular/theme';

@NgModule({
imports: [
  ...
  NbThemeModule.forRoot(),
  NbChatModule
]

  4. Angular.jsonにスタイルを追加

    "styles": [
      "node_modules/@nebular/theme/styles/prebuilt/default.css"

  5. 追加されたhtmlコンポーネント（サンプルはサイトで入手可能）

    <nb-chat title="Nebular Conversational UI">
    <nb-chat-message *ngFor="let msg of messages"
                     [type]="msg.type"
                     [message]="msg.text"
                     [reply]="msg.reply"
                     [sender]="msg.user.name"
                     [date]="msg.date"
                     [files]="msg.files"
                     [quote]="msg.quote"
                     [latitude]="msg.latitude"
                     [longitude]="msg.longitude"
                     [avatar]="msg.user.avatar">
</nb-chat-message>

<nb-chat-form (send)="sendMessage($event)" [dropFiles]="true">
</nb-chat-form>

出力1

enter image description here

参照：

https://akveo.github.io/nebular/docs/guides/install-nebular#manuallyhttps://akveo.github.io/nebular/docs/components/chat- ui/overview＃nbchatcomponent

angularstylesstyled-componentsangular-componentsnebular
4
user9480

同じ問題があり、チャットコンポーネントを<nb-layout>と<nb-layout-column>でラップすることで修正しました。チャットコンポーネントのみを使用する予定だったので、これを逃しました。

   <nb-layout>
    <nb-layout-column>
      <nb-chat title="Chat" size="medium">
        <nb-chat-message
          *ngFor="let msg of messages"
          [type]="msg.type"
          [message]="msg.text"
          [reply]="msg.reply"
          [sender]="msg.user.name"
          [date]="msg.date"
          [files]="msg.files"
          [quote]="msg.quote"
          [latitude]="msg.latitude"
          [longitude]="msg.longitude"
          [avatar]="msg.user.avatar"
        >
        </nb-chat-message>
        <nb-chat-form (send)="sendMessage($event)" [dropFiles]="true"> </nb-chat-form>
      </nb-chat>
    </nb-layout-column>
  </nb-layout>
1
ex1tium

メインのstyles.scssファイルにミックスインを読み込んでグローバルCSSを手動で含めようとしましたが、同じ結果が得られました。 codesandboxの私のプロジェクトは here です。 @nebularのみんなが私たちを助けてくれます！

0
Faust Life