如何在 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 之前以任何其他方式），您将必须添加 @ 987654324@你的风格。

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

这是因为实际的包是在你自己的样式之后加载的，它们自然会覆盖你的。

但是，最好将样式加载到 app 或按组件（例如每个组件都有自己的样式表）中，以避免样式中出现 !important