css - 如何更改 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 模型:

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 在您的样式中