如何在Aurelia对话框中更改边框颜色？

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>

和相关的view-model：

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