Как добавить пользовательские CSS в Ionic 3

Question

У меня есть HTML-страница, написанная на Ionic.Я хочу добавить границу нижней части каждой строки в сетке.Как я могу это сделать.

<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

Если ваш компонент "пример"

example.scss:

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

Answer 2

Вы можете добавить свой собственный CSS как глобальный или только к определенному компоненту

В этом разница

• app.scss (Global) является основным файлом .scss,Он используется для объявления любых стилей, которые будут использоваться во всем приложении.Хотя это «основной» файл .scss, вы вряд ли будете его часто использовать - большая часть стилей будет происходить в специфичных для компонента файлах .scss.

• У вас также будетодин .scss для каждого компонента, который вы создаете.Когда мы создаем страницу, у нас есть определение класса в файле .ts, шаблон в файле .html и любые стили для компонента в файле .scss.Хотя это не является строго обязательным, вы всегда должны создавать файл .scss для любых компонентов, имеющих стиль.А стиль в .scss используется только для конкретного компонента.

Теперь вы можете выбрать, где хотите использовать следующие строки кода CSS

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

Answer 3

Добавьте в вас следующий код app.scss:

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

Это добавит нижнюю границу к каждой строке.