React 输入框样式封装组件库概述

1. 项目概述

本项目旨在封装多种风格的 React 输入框组件，开发者无需重复编写样式与组件逻辑，只需通过 npm install 即可快速引入并使用不同样式的输入框。组件整体设计以简单、可扩展、样式可插拔为核心目标。使用者可以根据项目需求选择不同风格的输入框样式，或在项目中自定义拓展更多样式。

组件库采用 TypeScript + React 开发，并支持现代前端构建工具（Vite、Webpack、Next.js 等）无缝集成。

2. 目录结构 / 所有样式封装

所有输入框的不同样式均存放在统一的 src/page 目录中，每个样式为独立文件夹，便于维护和版本迭代。

3. API 接口（使用者可通过 props 传入参数）

所有样式组件均遵循统一的 props 规范，保证所有输入框组件可替换使用。

统一 API 设计（示例）

interface InputProps {
  value?: string;
  onChange?: (value: string) => void;
  placeholder?: string;
  disabled?: boolean;
  status?: 'default' | 'error' | 'success';
  prefixIcon?: ReactNode;
  suffixIcon?: ReactNode;
  className?: string;          // 自定义 class
  style?: React.CSSProperties; // 行内样式
}

使用方式示例

import { Page1Input, Page2Input } from 'react-input-styles';

function App() {
  return (
    <>
      <Page1Input placeholder="请输入用户名" />
      <Page2Input status="error" />
    </>
  );
}

5. 如何运行

1. 安装依赖

npm install react-input-styles

### **6. 在项目中使用**

```tsx
import { Page1Input } from 'react-input-styles';

function Demo() {
  return <Page1Input placeholder="输入点什么" />;
}