如何更改 ionic 4 中的侧边菜单背景颜色？答案

【问题标题】：How to change side menu background color in ionic 4?如何更改 ionic 4 中的侧边菜单背景颜色？
【发布时间】：2026-01-11 17:35:01
【问题描述】：

我想更改侧边菜单背景颜色，我尝试了一些方法但没有成功。

ion-menu{
    ion-content{
        background-color: transparent !important;
    }

    .inner-scroll {
        --background: var(--ion-menu-background);
    }
}

有谁知道如何在 ionic 4 中更改背景颜色？

【问题讨论】：

即使对于ion-content，您也需要使用 css 变量来设置背景颜色。
我试过这个东西，我只是想改变菜单背景颜色...
你能创建 stackblitz 吗？

标签： css ionic-framework ionic4

【解决方案1】：

试试这个

    .inner-scroll {
        background: green;
    }
   .inner-scroll .item-native{
        background: green;
    }

【讨论】：

【解决方案2】：

如果有渐变和深浅不一的颜色，您可以试试这个。如果您希望整个侧边菜单具有渐变，没有任何边框，将工具栏、内容和项目分开，这将特别有用。

// 在 variable.scss 文件中你可以创建你的 Ionic css 变量

:root
{
--custom-menu: radial-gradient(
        circle farthest-corner at 10% 20%,
        rgba(246, 133, 133, 1) 16.3%,
        rgba(172, 131, 241, 1) 90%
    );
}

// 在 app.component.scss 文件中，您需要引用您创建的变量

 ion-menu {
    --ion-background-color: var(--custom-menu);

    ion-toolbar {
        --background: transparent;
    }

    ion-list {
        background: transparent;
    }
    ion-item {
        color: rgb(255, 255, 255);
        --background: transparent;
    }
    ion-content {
        --background: transparent;
    }
}

// 在 appcomponent.html 文件中，确保您指定了无边框指令

<ion-header no-border>
  <ion-toolbar>
    <ion-title>Test</ion-title>
  </ion-toolbar>
</ion-header>

This is the output

【讨论】：