как переопределить Scss для конкретной страницы для конкретной кнопки в ионном 3

Question

Я не могу переопределить scss для определенной кнопки на странице.

https://stackblitz.com/edit/ionic-esc8ua?file=pages%2Fhome%2Fhome.html

   button {
       &.optgroup {
          &.input-wrapper {
            padding-left:10px !important;
          }
       }
     }

<button ion-item class="optgroup">Hello i want to apply css to this button</button>

   <button ion-item>i dont want to modify this button</button>

я хочу применить отступ слева: 10px к внутренней части текста первой кнопки

Решено:

.optgroup {
        & > div.item-inner {
          padding-left:6px !important;
        }
}

Answer 1

Попробуйте создать файл scss в домашнем каталоге и сослаться на него из домашнего компонента следующим образом:

home.ts

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
  styleUrls: [ 'home.scss' ]
})

и в home.scss :

.optgroup ::content {
  padding-left:100px;
}