ionic 2에서 ion-title의 글꼴 색상 변경 (Change font color of ion-title in ionic 2)

문제 설명

ionic 2에서 ion‑title의 글꼴 색상 변경 (Change font color of ion‑title in ionic 2)

안녕하세요, 저는 ionic2에서 할 일 목록 앱을 만들고 있습니다. 사이드바 목록이 있습니다. list.html에 다음 코드가 있습니다.

<ion‑navbar *navbar>
  <a menu‑toggle>
    <icon menu></icon>
  </a>
  <ion‑title class="listTitle">My First List</ion‑title>
</ion‑navbar>

css를 사용하여 "My First List"의 색상을 흰색으로 변경하려고 합니다. 하지만 작동하지 않습니다. 또한 제목의 배경색을 정의했지만 메뉴 아이콘보다 우선합니다. 그 이유는 무엇입니까?

css:

.listTitle
{
    background‑color : #58B43F;
    color : #ffffff !important;
    box‑shadow : 0px 6px 10px #888888;
}

내 예상 결과는 탐색 모음이 흰색 제목과 흰색 메뉴 아이콘과 함께 녹색으로 표시된다는 것입니다. 어떻게 해야 하나요?

감사합니다.

참조 솔루션

방법 1:

Ionic 2 uses keywords to reference SASS variables from the app.variables.scss file, which can be added as attributes directly to tags. Using this we can change primary and secondary to green and white:

$colors: (
  primary:    #58B43F,
  secondary:  #fff,
  ...
);

For some reason it didn't work when I tried to apply the secondary colour attribute to the ion‑title tag, but a nested text tag works fine (e.g. <p>).

So, below is how these colour aliases are used to style ion‑navbar (note specifically where primary and secondary aliases are placed within the tag declarations):

<ion‑navbar primary *navbar>
  <a menu‑toggle>
    <icon menu></icon>
  </a>
  <ion‑title>
    <p secondary>My First List</p>
  </ion‑title>
</ion‑navbar>

EDIT: Other customisations

To adjust the navbar height, add these to app.variables.scss:

$toolbar‑ios‑height: 8rem; // ios
$toolbar‑md‑height: 8rem;  // android

To use a new font‑family, override the ion‑navbar style:

ion‑navbar {
  font‑family: 'MyFontFamily';
  text‑transform: uppercase;
  letter‑spacing: 0.14em; 
}

(by asaf、courtness)

참조 문서

1. Change font color of ion‑title in ionic 2 (CC BY‑SA 2.5/3.0/4.0)