css - ionic 2的loadingController CSS类不工作

我希望我的loadingController包装器以自定义的CSS样式显示，但CSS的规则不适用于该元素（loadingController包装器）。

我的组件中有这个：

ionViewDidLoad() {
    let loader = this.loadingController.create({
        spinner: 'bubbles',
        content: 'getting data...',
        cssClass: 'loadingwrapper'
    });
    loader.present().then(() => {
        //some stuff
        ...
        loader.dismiss();
    });
}

这在我的css文件中：

.loadingwrapper{
    width: 77% !important;
    height: 15% !important;
    color: black !important;
    font-size: 1.25em !important;
    background-color: aliceblue !important;
    border-radius: 10px !important;
}

尽管这样做了（我什至没有尝试过“！important”），但所做的更改（都不存在）不适用于加载包装，并且显示得有些糟糕。

最佳答案

不确定要在何处应用css，但是如果要在页面组件文件中应用css，则会很难，因为加载控制器位于页面选择器之外。因此，如果您的页面组件名称是Foobar，并且您有.scss文件foobar.scss

page-foobar{
    .loadingwrapper{
        // not going to work
    }
}

您既可以将其全局添加到您的app/app.scss文件中，也可以（我认为这会起作用）

.md,.ios,.wp{
    page-foobar{
       .loadingwrapper{
        // styles!
       }
    }
}