Amplify V2（aws-amplify 6）Grid组件未正确生成含display:grid的HTML

核心原因 #

1. 全局样式未导入：Amplify UI组件的样式依赖全局样式文件，即使node_modules中存在样式定义，若未手动导入到项目中，amplify-grid这类组件类的样式不会生效。
2. 组件用法不符合V2规范：你使用View配合column/columnSpan属性的方式，不符合Amplify V2 Grid布局的API要求，需要用专门的GridItem组件来控制子项的列位置和跨度。

解决步骤 #

1. 导入Amplify UI全局样式 #

在项目入口文件（比如src/main.jsx或src/index.jsx）中添加全局样式导入：

import '@aws-amplify/ui-react/styles.css';

导入后，amplify-grid类的display: grid等默认样式会自动应用，无需手动添加display="grid"属性。

2. 修正Grid子组件的用法 #

替换View为Amplify V2提供的GridItem组件，并使用正确的属性控制布局：

// 确保导入GridItem组件
import { Grid, TextField, GridItem } from '@aws-amplify/ui-react';

return (
  <main>
    <h1>My App</h1>
    <Grid
      templateColumns="1fr 1fr"
      columnGap={"2em"}
      rowGap="1.5em"
    >
      <GridItem columnStart="1">
        <TextField label="First name:" />
      </GridItem>
      <GridItem columnStart="2">
        <TextField label="Last name:" />
      </GridItem>
      <GridItem columnSpan={2}>
        <TextField width="100%" label="Email:" />
      </GridItem>
    </Grid>
    <br />
    <div>
      🥳 App successfully hosted.
      <br />
    </div>
  </main>
);

3. 验证版本一致性 #

确保你的@aws-amplify/ui-react版本是2.x系列，可查看package.json确认：

{
  "dependencies": {
    "@aws-amplify/ui-react": "^2.x.x"
  }
}

若版本不符，执行升级命令：

npm install @aws-amplify/ui-react@latest

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