Ionic 2 loadingController cssClass 不工作答案

【问题标题】：Ionic 2 loadingController cssClass not workingIonic 2 loadingController cssClass 不工作
【发布时间】：2017-08-23 07:53:10
【问题描述】：

我希望我的 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”），但更改（没有一个）不适用于加载包装器，并且显示有点糟糕。

【问题讨论】：

请显示更多代码。 “不适用于元素” - 什么“元素”？
元素是包装器（旋转器在带有消息的白框中移动）
如果涉及到 Angular2，那么很多事情都适用于样式问题。如果您不提供代码，很难给出比“您的应用程序某处可能存在错误”更具体的答案；-)
相信我，这段代码就足够了。
也许你能理解这个问题，但可能不是，否则你就能解决它。对我来说绝对不是。也许是其他人……

标签： css angular ionic-framework sass ionic2

【解决方案1】：

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

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

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

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

【讨论】：

是的，我正在页面组件文件中应用 css。我已将您告诉我的内容添加到我的 app/app.scss 中，但仅使用类选择器，现在......它有效！非常感谢
是的，不用担心

【解决方案2】：

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

安卓

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

ios

$loading-ios-border-radius: 10px

Windows

$loading-wp-border-radius:  10px

你可以看到global variable list here。

【讨论】：