Question

我对离子样式有疑问。我启动了一个空白应用程序，并添加了一些文本和标题样式。该应用程序可以在浏览器中很好地启动，但是样式并未如预期的那样呈现（较大的文本按钮和标题背景颜色不完整）。如果刷新浏览器页面，这些问题将不再出现。

Screenshot after refresh, everything is okay

源代码非常简单，因为我只是编辑了一个空白的离子应用程序：

<ion-header>
      <ion-navbar>
        <ion-title text-center class="headerStyle">
          Ionic Blank
        </ion-title>
      </ion-navbar>
</ion-header>

<ion-content class="homeContentStyle" padding center>
    <ion-grid text-center>
        <ion-row style="margin-top:3%;">
            <ion-col>
                <p>Hello</p>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col>
                <button class="homeButton" ion-button large>Testing</button>
            </ion-col>
        </ion-row>
    </ion-grid>

</ion-content>

SCSS：

page-home {
        ion-grid {
        height: 80%;
        justify-content: center;
    }

    .headerStyle {
        background: white;
        font-variant: small-caps;
    }

    .homeContentStyle {
        background: green;
        font-variant: small-caps;
        font-weight: bold;
        font-size: 120%;
        color: white;

        img {
            width:7em;
            height:7em;
        }

        .homeButton {
            padding: 35px;
            margin:5%;
            width:70%;
            color: white;
            border-radius: 0px !important;
        }
    }
}

Answer 1

<ion-header class="headerStyle">
      <ion-navbar>
        <ion-title text-center>
          Ionic Blank
        </ion-title>
      </ion-navbar>
</ion-header>

.homeButton {
            padding: 35px;
            margin:5%;
            width:70%;
            color: white;
            border-radius: 0px !important;
            font-size: 50px;
        }

Answer 2

我认为是在ion-navbar的第一个渲染上；它正在获得带有类的子div元素

toolbar-background-md

具有

背景：＃f8f8f8;

这就是标题背景颜色不完整的原因，但是在重新加载后，您正在使用某种苹果设备（我猜是这样），而该设备没有具有任何背景的类。这就是为什么刷新后所有内容都得到修复的原因。

与按钮相同。在第一个渲染器上，它得到一个名为

的类

button-md

具有

text-transform：大写；

这会阻止它

font-variant：小写；

注意：以

结尾的类

-md

仅适用于Android。

如果您跑步，事情会更加清晰

ionic serve --lab

Screenshot for lab flag

以下SCSS将解决您的问题

page-home {
  ion-grid {
    height: 80%;
    justify-content: center;
  }

  ion-navbar {
    background: white;
    font-variant: small-caps;
    .toolbar-background {
      background: none;
    }
  }

  .homeContentStyle {
    background: green;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 120%;
    color: white;

    img {
      width:7em;
      height:7em;
    }

    .homeButton {
      padding: 35px;
      margin:5%;
      width:70%;
      color: white;
      border-radius: 0px !important;
      text-transform: unset;
    }
  }
}

离子应用程序样式无法正确呈现

2 个答案: