Question

我试图覆盖css变量以更改ionic 4应用程序页面中 ion-segment-button 元素的外观。

我尝试使用本页中指定的变量：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>

例如，如果我想自定义页面的离子段按钮的填充顶部，请根据此处提供的文档：https://ionicframework.com/docs/api/segment-button，-padding-top 是用于执行此操作的变量的名称，因此我打开了包含 ion-segment 的页面的sass文件，并添加了以下代码：

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

但是它不起作用。

这只是一个例子，我想使用ionic 4 sass变量自定义许多其他属性，但我认为我使用的方法是错误的。

任何帮助吗？

离子4中的CSS变量

0 个答案: