Ionic 2：如何覆盖ionic组件的样式

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>。关于它的医生。

像这样：工作中的笨蛋

<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 上的默认值，我强烈建议您阅读这篇文章。Ionic 2 应用程序样式指南

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

登录.scss

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