[Ionic 5] Ion-컴포넌트 광역 기본 스타일 적용

# 개요

프로젝트에 걸쳐, 특정 ionic component에 일괄적인 스타일을 적용하고 싶거나, 기본 속성이 비슷하다면, 예를 들어 버튼은 투명 배경에서 주로 사용된다면, 글로벌 스타일시트에 ionic component 별 기본 스타일을 적용해두는 것이 바람직하다.

# 적용하기

theme/variable.scss 상에서 :root{} 태그 안에 넣어주면, Application에 전체적으로 적용된다.

/* Set the color on all ion-button elements */

ion-button {

  --color: #222;

}

 

//ion-button이 내부적으로 var(--color) 형식으로 적용되기 때문에, --color 라는 미리 지정된 예약어에 값을 할당해주어야 한다.

/* Set the background on an ion-button with the .fancy-button class */

.fancy-button {

  --background: #00ff00;

}