只需在variables.scss中添加“menu-width”

$menu-width: 200px;

使用类别名称变更侧边功能表的长度。

<ion-menu class="custom" side="end" menuId="first">
</ion-menu>

在CSS中，您可以使用如下所示。

.custom {
  --width: 500px;
}

For Ionic5 and above projects, we can overwrite the side panel's CSS like below to make it customized as per requirements.

ion-split-pane {
  --side-max-width: 18%;
  --side-min-width: 270px;
}

Put this class where you implemented your menu so it will overwrite existing CSS with this.

根据this只需在ion-side-menu元素中添加width属性即可。
侧菜单的离子文档为here

<ion-side-menu
       side="left"
       width="500">
</ion-side-menu>

As people gave their answer I wish to give it mine too.
PX is good but if we add width in percentage then its works with every device. add this scss on your page.scss file

ion-menu {
  --width: 83%;
}

And the HTML does not need to give a class name or anything, you can give it if you want.

<ion-menu contentId="main-content" type="overlay"></ion-menu>

将其放入：变量的根目录.scss
例如：

<ion-menu menuId="mainMenu" class="mainMenu">
...
</ion-menu>

并将其设置为

:root {

  .mainMenu {
    --width: 100vw;
  }

  or

  ion-menu {
    --width: 100vw;
  }

}