如何在Ionic 3中添加自定义css

Question

我有一个用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>

Answer 1

在app.scss中添加以下代码：

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

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

Answer 2

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

这是差异

• app.scss（Global）是主要的.scss文件。它用于声明任何 将在整个应用程序中全局使用的样式。 虽然它是“主要”.scss文件，但您不太可能经常使用它 - 大多数样式都将在特定于组件的.scss中发生 文件。

• 您创建的每个组件也会有一个.scss。什么时候我们 创建一个Page，我们在.ts文件中有一个类定义， .html文件中的模板以及该组件中的任何样式 .scss文件。虽然并非严格要求，但您应该始终这样做 为具有样式的任何组件创建.scss文件。和风格 in .scss仅用于特定组件。

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

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

Answer 3

如果您的组件是＆＃34;示例＆＃34;

example.scss：

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