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

Posted 2023-03-22

【中文标题】如何更改 ionic 4 中的侧边菜单背景颜色？

【英文标题】：How to change side menu background color in ionic 4?

【发布时间】：2019-03-01 10:00:52

【问题描述】：

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

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

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

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

【问题讨论】：

即使对于ion-content，您也需要使用 css 变量来设置背景颜色。

我试过这个东西，我只是想改变菜单背景颜色...

你能创建 stackblitz 吗？

【参考方案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