css - ionic 2 : How to overwrite the style of ionic component

Question

我是Ionic 2新手，请问如何改变ionic组件的样式？

我遇到了如下图所示的问题:

<form action="">
    <ion-list>
        <ion-item>
            <ion-label fixed>Username</ion-label>
            <ion-input type="text" value="" clearInput></ion-input>
        </ion-item>

        <ion-item>
            <ion-label fixed>Password</ion-label>
            <ion-input type="password" clearInput></ion-input>
        </ion-item>
    </ion-list>
</form>

布局将呈现为:

每一项之间有3条灰线，长的是ion-list的，短的是ion-item的。

我试图覆盖theme/variables.scss中的样式，但似乎没有设置。

我在chrome里面看的很深，发现html是这样的

我不认为覆盖“.list-ios .item-block .item-inner”的样式是个好主意，还有其他方法可以解决这个问题吗？

谢谢。

Answer 1

你只需要给 no-lines在这个元素上<ion-list> . Doc about it .

像这样:Working Plunker

<ion-list no-lines>

  <ion-item>
    <ion-label fixed>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label fixed>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>

如果您需要了解如何在 Ionic2 上更改默认值，我强烈建议您阅读这篇文章。 A Guide to Styling an Ionic 2 Application

您不需要使用 !import如果您在页面组件内使用如下所示的样式，则进行 hack。使用 .ios,.md像这样:

登录.scss

 .ios,
    .md {
        page-login {
            .margin-top-35 {
                margin-top: 35px;
            }
         }
 }