Question

我希望我的loadController包装器以自定义的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”），但更改（没有一个）不适用于加载包装器，它显示有点可怕。

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文件中全局执行此操作。

的Android

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

IOS

$loading-ios-border-radius: 10px

窗

$loading-wp-border-radius:  10px

您可以看到global variable list here。

Ionic 2 loadingController cssClass不工作

2 个答案: