Gmail复刻项目侧边栏组件居中无法左右移动问题求助

云上老周

2026-7-30

Gmail侧边栏布局修复方案

问题说明

正在复刻Gmail项目，需创建包含收件箱、发送、草稿等选项的侧边栏。当前侧边栏默认居中显示，调整左右位置时图标消失、布局混乱：

使用position: relative后布局异常
尝试position+right属性调整无效

问题根源

未给侧边栏容器设置正确的定位与宽度，导致单个选项调整位置时破坏整体布局
.sidebarOption.MuiSvgIcon-root选择器错误——这是两个类名同时作用于同一元素的写法，但实际图标是.sidebarOption的子元素，需用后代选择器

修复步骤与代码

1. 给侧边栏容器添加基础样式

先确保侧边栏容器（示例类名为.sidebar）固定在左侧，占据合适宽度：

.sidebar {
  width: 250px;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  padding-top: 20px;
  background-color: white;
}

2. 修正`.sidebarOption`的CSS代码

.sidebarOption{
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    cursor: pointer;
    color: #818181;
}

.sidebarOption:hover,
.sidebarOption:hover > p,
.sidebarOption:hover > h3,
.sidebarOption--active,
.sidebarOption--active > p,
.sidebarOption--active >h3 {
    background-color: #fcecec;
    color: red;
    font-weight: 800 !important;
}

/* 修正图标选择器，改用后代选择器 */
.sidebarOption .MuiSvgIcon-root{
    padding: 5px;
}

.sidebarOption > h3{
    flex: 1;
    margin-left: 10px;
    font-size: 14px;
    font-weight: 400;
}

.sidebarOption > p{
    display: none;
    font-weight: 300;
}

.sidebarOption:hover > p{
    display: inline;
}

.sidebarOption--active > p {
    display: inline;
}