如何在 Ionic 3 中添加自定义 CSS答案

【问题标题】：How to add custom css in Ionic 3如何在 Ionic 3 中添加自定义 CSS
【发布时间】：2018-11-10 02:53:51
【问题描述】：

我有一个用 Ionic 编写的 html 页面。我想为网格中的每一行添加边框底部。我该怎么做。

<ion-grid *ngFor="let item of items">
    <ion-row>
      <ion-col>
        <img src='../assets/imgs/doctor.png'>
      </ion-col>
      <ion-col col-10>
        {{item}}
      </ion-col>
    </ion-row>
  </ion-grid>

【问题讨论】：

标签： css angular sass ionic3

【解决方案1】：

在你里面添加以下代码app.scss:

ion-row {
    border-bottom: 5px solid red;
}

它将为每一行添加边框底部。

【讨论】：

【解决方案2】：

您可以将自定义 css 添加为全局或仅添加到特定组件

这就是区别

app.scss(Global) 是主 .scss 文件。它用于声明任何将在整个应用程序中全局使用的样式。尽管它是“主要” .scss 文件，但您可能不会经常使用它—— 大多数样式将发生在组件特定的 .scss 中文件。
您还将为您创建的每个组件创建一个 .scss。什么时候我们创建一个 Page，我们在 .ts 文件中有一个类定义， .html 文件中的模板和组件中的任何样式 .scss 文件。虽然不是严格要求，但您应该始终为任何具有样式的组件创建 .scss 文件。和风格 in .scss 仅用于特定组件。

现在您可以选择在哪里使用以下几行 css 代码

ion-row {
    border-bottom: 5px solid red;
}

【讨论】：

【解决方案3】：

如果你的组件是“示例”

example.scss：

page-example {
  ion-row {
    border-bottom: 1px solid black;
  }
}

【讨论】：

这是针对“作用域”css