Ionic 2 加载控制器 cssClass 不起作用

Question

我希望我的 loadController 包装器以自定义的 css 样式显示，但 CSS 的规则不适用于元素(加载控制器包装器(。

我的组件中有这个：

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"(，但更改(它们都不适用于加载包装器，并且显示得有点糟糕。

Answer 1

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

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

您可以将其全局添加到您的app/app.scss文件中，或者(我认为这将起作用(

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

Answer 2

您必须

在variables.scss文件中全局执行此操作。

人造人

$loading-md-border-radius:10px;

爱欧斯

$loading-ios-border-radius: 10px

窗户

$loading-wp-border-radius:  10px

您可以在此处查看全局变量列表。