React中使用col s1类的图标为何纵向排列而非横向行布局

图标始终纵向排列的核心原因是类名拼写错误：Main.jsx中给行容器写的属性为clasName="row"，漏写了字母s，React无法识别这个错误属性，导致Materialize栅格系统的.row类没有被绑定到对应DOM元素上。
Materialize的.row类默认自带display: flex布局规则，负责让内部的.col列元素横向排列。该类失效后，所有.col元素会按照块级元素默认规则纵向堆叠，该问题和组件拆分方式、是否使用map遍历渲染没有关联，你希望保留的map遍历写法完全可以正常使用。

• 修正类名拼写错误
  把Main.jsx里错误的<div clasName="row">改为<div className="row">，保存刷新后图标就会自动按横向排列。
• （可选优化）调整列宽适配布局
  Materialize使用12列栅格系统，当前给每个列设置的s1（占1/12宽度）会让4个图标总宽度仅占4/12，整体挤在左侧。可以把Socials.jsx里的className="col s1"改为className="col s2 offset-s1"或者className="col s3"，调整图标间距和整体居中效果。
• （可选修复）补全图标尺寸逻辑
  你在Socials.jsx里通过useRef和窗口宽度判断定义的size变量目前没有传入SocialIcon组件，实际不会生效。如果需要响应式控制图标大小，可以给组件补充样式属性：

  <SocialIcon
    id={props.icon}
    bgColor="#2C2C2C"
    fgColor="#ECCECE"
    network={props.icon}
    url={props.link}
    style={{ width: `${size.current}px`, height: `${size.current}px` }}
  />
  

Main.jsx 关键片段 #

return (
  <React.Fragment>
    <Helmet>
      <title>Felipe GD</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </Helmet>
    <div className="container">
      {/* 修正clasName拼写错误为className */}
      <div className="row">
        {socialMedia.map((socials) => (
          <Socials
            getOpacity={null}
            getVisibility={null}
            link={socials.link}
            icon={socials.icon}
          />
        ))}
      </div>
    </div>
  </React.Fragment>
);

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