HTML转React框架失败求助：组件样式与原页面不符

1. 补充全局基础样式 #

原HTML的<body>标签带有bg-gray-100 text-lg类，这是页面全局背景色和默认字体大小的基础样式，但你的React组件未给根容器或全局元素添加这些样式，导致页面基础视觉效果不一致。

修复方式：

• 方案一：在根组件（如App.js）的最外层容器添加类名：

function App() {
  return (
    <div className="bg-gray-100 text-lg min-h-screen">
      <SecondFormPage />
    </div>
  );
}

• 方案二：直接修改public/index.html的<body>标签：

<body class="bg-gray-100 text-lg">

2. 正确引入Tailwind CSS和Font Awesome #

原HTML通过CDN引入了Tailwind和Font Awesome资源，但React项目需要在public/index.html的<head>标签中统一添加这些依赖，而非在组件内单独引入：

修改public/index.html：

<head>
  <!-- 保留原有meta、title标签 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>

3. 补全输入框缺失的样式类 #

对比原HTML与React组件的输入框类名，原HTML输入框多了shadow-md类，你的React组件遗漏了该类，导致输入框阴影效果不一致：

修改SecondFormPage组件中的输入框：

<input 
  className="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline shadow-md" 
  id="income" 
  type="text" 
  pattern=".{5,7}" 
  placeholder="Household Income" 
  value={income} 
  onChange={e => setIncome(e.target.value)} 
  required 
/>

（county输入框执行同样的类名补全操作）

4. 修正跳转链接（功能优化） #

React项目中不要使用原生<a>标签跳转本地页面，会触发整页刷新，应改用React Router的<Link>组件：

步骤1：安装依赖

npm install react-router-dom

步骤2：修改组件内的跳转代码

import { Link } from 'react-router-dom';

// 替换原有<a>标签
<Link to="/first-form" className="w-1/2 flex items-center justify-center px-6 border border-blue-500 text-blue-400 hover:bg-blue-500 hover:text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
  BACK
</Link>
<Link to="/third-form" className="w-1/2 flex items-center justify-center py-4 px-6 border border-blue-500 text-blue-400 hover:bg-blue-500 hover:text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
  CONTINUE
</Link>

同时需在路由配置文件中对应设置/first-form、/third-form的路由规则。

关于目录结构的说明 #

React文件与HTML文件的目录位置差异不会直接影响样式渲染，只要确保依赖资源正常加载、样式类名完全匹配、全局样式正确设置，即可还原原HTML的视觉效果。

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