Ionic 2: How to overwrite the style of ionic component

Question

I'm new on Ionic 2, I would like to ask how to change the style of ionic component?

I met a problem as shown below:

<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>

The layout will be rendered as:

There are 3 grey lines between each items, the long one is due to ion-list and the short one is due to ion-item.

I tried to overwrite the style in theme/variables.scss, but it seems there is no setting for it.

I saw deeply in Chrome and found the html is like this

I don't think overwrite the style of ".list-ios .item-block .item-inner" is a good idea, is there any other way to solve this problem?

Thanks.

Solution 1

You just need to give no-lines on this element <ion-list>.Doc about it.

Like this: 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>

If you need to learn how to change default them on Ionic2, I highly recommend to read this article.A Guide to Styling an Ionic 2 Application

You don't need to use !import hack if you use styles as shown below inside the page's component. Use .ios,.md like this:

login.scss

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

Solution 2

For removing lines there is an attribute for ion-item: no-lines

<ion-item no-lines>
            <ion-label fixed>Username</ion-label>
            <ion-input type="text" value="" clearInput></ion-input>
        </ion-item>

There are also utility attributes that can be used.