React中如何调整侧边栏尺寸？新手布局问题求助

核心问题：类名不匹配 #

你的App.js中aside标签的className是sidemenua，但App.css里定义的样式类是.sidemenu——这直接导致CSS规则根本没有应用到侧边栏元素上，所以无论怎么修改.sidemenu的宽度都不会有效果。

修复步骤 #

1. 统一类名
   要么修改App.css，把样式类名改成.sidemenua：

   .sidemenua {
     width: 50%; /* 替换成你需要的240px/1000px等数值 */
     border:1px solid white;
     background-color: #282c34; /* 可选：加背景色方便观察效果 */
   }
   

   要么修改App.js，把aside的className改成sidemenu：

   <aside className="sidemenu">
     <h1>Aside</h1>
   </aside>
   

2. 调整布局实现侧边栏效果
   即使类名正确，默认情况下aside是块级元素，会独占整行，无法形成侧边栏+主内容的布局。给父容器.App添加flex布局，让侧边栏和主内容横向排列：

   .App {
     display: flex;
     min-height: 100vh; /* 让容器占满视口高度 */
   }
   
   /* 让主内容区域占满剩余空间 */
   section {
     flex: 1;
     padding: 20px;
   }
   

修改后的完整示例 #

App.css：

.App {
  display: flex;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.sidemenua {
  width: 50%;
  border:1px solid white;
  background-color: #282c34;
  color: white;
  padding: 10px;
}

section {
  flex: 1;
  background-color: white;
  padding: 20px;
}

.App-header {
  text-align: center;
  padding: 20px;
}

App.js保持原有结构即可，确保aside的className和CSS类名一致。

内容的提问来源于stack exchange，提问作者Lyna