0

我有一个对话框，你可以在这里看到：

<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 概念。你能告诉我解决方案吗？

4

1 回答 1

1

正如@Jesse 在他的评论中建议的那样，您可以覆盖某些元素的样式。

在这种情况下，您只需将以下内容添加到样式表中

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

但是要注意的一件事是，如果您要在 aurelia 中加载包含上述内容的样式表，main这是非常常见的（或在加载之前以任何其他方式aurelia-dialog），您将不得不添加!important到您的样式中。

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

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

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

于 2017-11-07T05:24:12.857 回答