React.js中如何让map函数渲染的组件列表实现水平对齐

问题根因 #

• 你错误地将flex布局属性写在了每个<Typography>子元素的类上，flex布局需要作用在父容器上才能控制子元素的排列方向
• flex-direction不存在horizontal这个合法属性值，水平排列对应的属性值是row（也是flex布局的默认值，不单独声明也生效）

具体修改步骤 #

第一步：调整组件结构 #

给包裹所有页码的父容器<Table.Cell>添加自定义类，移除每个<Typography>上的pages类，给单个页码可选加独立类用于自定义样式：

<Table.Cell className="pagination-wrapper">
 {[...Array(this.props.numPages)].map((e, i) => (
   <Typography 
     customLink 
     onClick={() => this.handlePageClick(i + 1)} 
     key={'key'.concat(i)} 
     className='page-item'
   >
     {i + 1}
   </Typography>
 ))}
</Table.Cell>

第二步：修改CSS样式 #

给父容器添加flex布局属性，可根据需求调整间距、对齐规则：

.pagination-wrapper {
  display: flex;
  gap: 10px; /* 调整页码之间的水平间距 */
  align-items: center; /* 让所有页码垂直居中对齐 */
}

/* 单个页码的自定义样式按需添加即可 */
.page-item {
  cursor: pointer;
  padding: 2px 6px;
}

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