在 Ionic 4 中更改 css答案

【问题标题】：Change css in Ionic 4在 Ionic 4 中更改 css
【发布时间】：2019-04-05 04:47:13
【问题描述】：

我在将样式从 Ionic 3 迁移到 Ionic 4 时遇到问题，在我的一个观点中，我将背景配置为一种颜色，并且在表单中我有 3 个离子项目，这是我遇到的第一个问题是我将 item-inner 修改为没有边框并且不起作用，第二个是 ion-toggle 默认采用我的视图的背景颜色，如果我更改它，它会将值视为正确检查

HTML：

<ion-header>

</ion-header>

<ion-content no-bounce>
<div class="wrapper">
    <div class="logo" padding-horizontal>
    <ion-row class="img">
        <img src="assets/imgs/logo.png" alt="Movistar">
    </ion-row>
    <ion-row class="click">
        Click!
    </ion-row>
    </div>
    <form novalidate padding-horizontal margin-top>
    <ion-list padding-horizontal>
        <ion-item class="custom-item">
        <ion-label fixed>Usuario</ion-label>
        <ion-input type="text" name="username" class="invalid" required></ion-input>
        </ion-item>
        <!--<ion-label padding-horizontal color="danger">&#10060; Campo requerido</ion-label>-->

        <ion-item class="custom-item" margin-top>
        <ion-label fixed>Contraseña</ion-label>
        <ion-icon slot="end" name="eye-off"></ion-icon>
        <ion-input type="password"></ion-input>
        </ion-item>
        <!--<ion-label padding-horizontal  color="danger">&#10060; Campo requerido</ion-label>-->

        <ion-item id="remember">
        <ion-label>Recordar credenciales?</ion-label>
        <ion-toggle color="success"></ion-toggle>
        </ion-item>

        <div>
        <ion-button type="submit" expand="block" class="button-ingresar">Ingresar</ion-button>
        </div>
    </ion-list>
    </form>
</div>
</ion-content>

CSS：

.toolbar-background {
    border: none !important;
}

.logo {

    .img {
        display: block;
        max-width: 500px;
        max-height: 98px;
        width: auto;
        height: auto;
        width: 100%;
        padding: 0px var(--padding);

        img {
            margin-top: 50px;
            display: block;
            max-width: 100%;
            height: auto;
        }
    }

    .click {
        display: inline-block;
        font-family: 'Custom';
        color: white;
        font-size: 2.5rem;
        width: 100%;
        text-align: right;
        padding: 0px var(--padding);
        line-height: 4rem;
    }
}

form {
    .password-eye {
        position: relative;
        cursor: pointer;
    }

    #remember {
        background-color: transparent;
        color: white;
        margin-top: 8px;
        margin-bottom: 8px;

        .item-inner {
            border: none !important;
        }
    }

    ion-item {
        border: none !important;
    }

    .custom-item {
        color: white;
        border-radius: var(--border-radius);
        background-color: var(--custom-primary-contrast);
        border: none !important;

        .item-inner {
            border: none !important;
        }
    }

    .button {
        margin: 0;
    }
}

ion-content {
    --ion-background-color: var(--custom-primary);
}

.button-ingresar {
    --background: var(--custom-secondary) !important;
}

【问题讨论】：

是您拥有的第一张图片和您想要的第二张图片？你也介意添加 html
两个图像都是我不想要的，输入带有边框，css（在 Ionic 3 中工作）不会删除它们。第二件事是切换采用我不想要的离子含量的背景颜色。
html 的任何机会？
添加 html @IraW

标签： css ionic-framework

【解决方案1】：

是的，从 Ionic 3 到 Ionic 4 需要一些修补。我可以推荐使用他们的文档，其中显示了新的 css 变量。

对于您的特定用例，我认为这 2 个 css 变量将解决它。

 --inner-border-width: 0; // The old .item-inner border fixer.

和

 --background: var(--custom-primary-contrast);

某些组件的边框半径也有同样的问题

 --border-radius: var(--border-radius);

链接到 ion-toggle 的 css 变量

链接到 ion-button 的 css 变量

希望对您有所帮助！

【讨论】：