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

Posted 2023-03-06

【中文标题】Ionic 2：如何覆盖离子组件的样式

【英文标题】：Ionic 2: How to overwrite the style of ionic component

【发布时间】：2017-08-15 13:26:30

【问题描述】：

我是Ionic 2的新手，请问如何更改离子组件的样式？

我遇到了一个问题，如下图：

<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”的样式不是一个好主意，有没有其他方法可以解决这个问题？

谢谢。

【参考方案1】：

在您的 CSS 属性之后添加 !important。

例如：

    .ion-nav-button-right 
         margin-top: -7px !important;
         margin-right: 0 !important;
    

对于您的问题，只需删除以下标签：

<ion-item style="background: #f3f3f3 !important">
          <ion-input  type="text" placeholder="Write Your Comments"></ion-input>
        </ion-item>

【讨论】：

!important 如果我们想保持项目的可维护性和可重用性，这不是一个可接受的答案。此外，内联样式也会破坏 css 中的特殊性并导致项目不可维护。这就是我投反对票的原因。

@GeorgeAntonakos 接受了你的建议，这就是我赞成的原因

@George Antonakos 当大部分元素样式发生在运行时时，我感觉在 Ionic 中。您将不知道将哪个类添加到元素中。因为您无法直接在代码中看到这些类。所以有时你可能需要添加 !important。

@Vasanth 我同意你的看法。此外，当您拥有自定义组件并且想要特定样式时，为每个平台（md、ios 等）编写相同的结构以更改一个或多个属性是一种非常肮脏的解决方案。 !important，在这种情况下，是一个很好的解决方案，并不总是那么糟糕。

【参考方案2】：

对于删除行，ion-item 有一个属性：no-lines

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

还有utility attributes可以使用。

【讨论】：

!important 在任何特定情况下都不是一种方法。最好尊重正在使用的库并遵循相同的模式并更改您的设计或仅使用提供的功能。

@GeorgeAntonakos 是的。这就是为什么我在最后的手段中提到的原因。无论如何都删除了它。

【参考方案3】：

您只需在此元素上提供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：

login.scss

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