Aurelia-dialog - "Styling The Dialog" documentation not working for me

I am using aurelia-dialog and trying to override the default CSS but I am not having any luck following the “Styling The Dialog” documentation.

In my main.js file I have:

export function configure(aurelia) {
    .plugin(PLATFORM.moduleName('aurelia-dialog'), config => {
      config.settings.startingZIndex = 5;
      config.settings.keyboard = true;

  aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');

  if (environment.testing) {

  return aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));

But I am getting an error in the browser:

TypeError: config.useDefaultSettings is not a function

Any suggestions?

1 Like

Where did you get config.useDefaultSettings()? It’s not in the doc.

This is what I use. I cleanup the css, and define dialog styles in my app’s scss file.


BTW .useCSS('_dialog.scss') would not work, you need to pass a piece of css text to the call. But it looks like you should do the same thing I did, just load your _dialog.scss in app’s main css.


Thanks @huochunpeng. I got the useDefaultSettings() from the Aurelia docs I guess it was an error on my part to assume cfg.useDefaultSettings() was just another way to write config.useDefaultSettings().

And thanks for the note that .useCSS('_dialog.scss') wouldn’t work. I totally overlooked the fact that the SASS would not be compiled. Or at least that I what I am assuming after reading your comment.

I have added the dialog styles to my base styles as you suggested. Thanks!

1 Like

That’s a doc bug, or outdated doc. Will fix it.