title: Ionic 2: How to overwrite the style of ionic component
body: <p>I'm new on Ionic 2, I would like to ask how to change the style of ionic component?</p>
  
  <p>I met a problem as shown below:</p>
  
  <pre><code>&lt;form action=""&gt;
      &lt;ion-list&gt;
          &lt;ion-item&gt;
              &lt;ion-label fixed&gt;Username&lt;/ion-label&gt;
              &lt;ion-input type="text" value="" clearInput&gt;&lt;/ion-input&gt;
          &lt;/ion-item&gt;
  
          &lt;ion-item&gt;
              &lt;ion-label fixed&gt;Password&lt;/ion-label&gt;
              &lt;ion-input type="password" clearInput&gt;&lt;/ion-input&gt;
          &lt;/ion-item&gt;
      &lt;/ion-list&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The layout will be rendered as:
  <a href="https://i.stack.imgur.com/hvZeu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hvZeu.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>I tried to overwrite the style in theme/variables.scss, but it seems there is no setting for it.</p>
  
  <p>I saw deeply in Chrome and found the html is like this
  <a href="https://i.stack.imgur.com/GDo7U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GDo7U.png" alt="enter image description here"></a></p>
  
  <p>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?</p>
  
  <p>Thanks.</p>