Блог

Я пытаюсь переопределить переменные css, чтобы изменить внешний вид элемента ion-segment-button на странице моего приложения ionic 4.

Я попробовал использовать переменные, указанные на этой странице : https://ionicframework.com/docs/api/segment-button

Вот выдержка из кода страницы.

 <ion-header>
    <ion-toolbar color="tertiary">
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title align="center">Preferences</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-segment>
        <ion-segment-button value="categories">
            <ion-label>Categories</ion-label>
        </ion-segment-button>
        <ion-segment-button value="pays">
            <ion-label>Countriess</ion-label>
        </ion-segment-button>
        <ion-segment-button value="langues">
            <ion-label>Languages</ion-label>
        </ion-segment-button>
    </ion-segment>
</ion-content>

  

Если, например, я хочу настроить заполнение верхней части кнопки ion-segment на моей странице, в соответствии с документами, доступными здесь: https://ionicframework.com/docs/api/segment-button , —padding-top — это имя переменной, используемой для этого, поэтому я открыл файл sass страницы, содержащий ion-segment, и ядобавлен следующий код :

 ion-segment-button{
    --padding-top:3px;
}
  

Но это не работает.

Это всего лишь пример, у меня есть много других свойств, которые я хочу настроить, используя переменные ionic 4 sass, но я думаю, что метод, который я использую для этого, неверен.

Есть ли hep?