Как изменить цвет границы в Aurelia Dialog?

Question

У меня есть диалог, как вы можете видеть здесь:

<template >
      <ux-dialog >
        <ux-dialog-body>
          <div t="logbook.delete-logs">Möchten Sie alle Logbücher löschen?</div>
        </ux-dialog-body>

        <ux-dialog-footer>
          <button attach-focus="true" click.trigger="controller.cancel()" t="logbook.cancel">Abbrechen</button>
          <button click.trigger="controller.ok()" t="logbook.ok">Ok</button>
        </ux-dialog-footer>
      </ux-dialog>
</template>

и связанная модель представления:

import { inject } from 'aurelia-dependency-injection'
import { DialogController } from 'aurelia-dialog'

@inject(DialogController)
export class DeleteLogbook {
  public controller: DialogController

  constructor (controller: DialogController) {
    this.controller = controller
  }
}

Я хочу изменить цвет границы диалога. Я хочу использовать концепцию Aurelia для этой цели. Не могли бы вы сказать мне решение?

Answer 1

Как @Jesse предложил в своем комментарии, вы можете переопределить стили определенных элементов.

в этом случае вы просто добавляете следующее в вашу таблицу стилей

ux-dialog {
    border: 5px solid #fff700;
}

Однако стоит отметить, что если вы хотите загрузить таблицу стилей, содержащую вышеизложенное, в вашу aurelia main что очень часто (или любым другим способом перед загрузкой aurelia-dialog), вам придется добавить !important в ваших стилях.

ux-dialog {
    border: 5px solid #fff700 !important;
}

это потому, что фактический пакет загружен после ваших собственных стилей, и они естественным образом переопределят ваш.

Тем не менее, лучше загрузить ваши стили в app или компонентом (таким как каждый компонент, имеющий свою собственную таблицу стилей), чтобы избежать !important в твоих стилях