react-unified-auth 1.0.1 → 1.0.2

package/README.md

@@ -220,14 +220,77 @@ const { formConfig, loading, error } = useDynamicForm(formId);
 - `POST /auth/logout` - 用户登出
 - `GET /auth/me` - 获取当前用户信息
 
-## 样式自定义
-
-组件使用了Tailwind CSS的类名，你可以通过以下方式自定义样式：
-
-1. 在你的项目中配置Tailwind CSS
-2. 通过`className` prop传递自定义类名
-3. 覆盖默认样式
-
+## 样式自定义
+
+组件使用了Tailwind CSS的类名，你可以通过以下方式自定义样式：
+
+### 1. 基本配置
+
+确保你的项目中已正确配置Tailwind CSS：
+
+```bash
+# 安装依赖
+npm install -D tailwindcss postcss autoprefixer
+
+# 初始化配置
+npx tailwindcss init -p
+```
+
+### 2. 更新tailwind.config.js
+
+在配置中包含组件库的文件路径：
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/react-unified-auth/dist/**/*.{js,ts,jsx,tsx}", // 必须包含此行
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+### 3. 导入Tailwind CSS
+
+在项目入口文件中导入：
+
+```css
+/* src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+```jsx
+// src/index.jsx
+import './index.css';
+```
+
+### 4. 自定义样式
+
+- **通过className覆盖**：
+  ```jsx
+  <Button className="bg-red-600 hover:bg-red-700" />
+  ```
+
+- **在Tailwind配置中扩展**：
+  ```js
+  // tailwind.config.js
+  module.exports = {
+    theme: {
+      extend: {
+        colors: {
+          primary: '#1d4ed8',
+        },
+      },
+    },
+  }
+  ```
+
 ## 开发
 
 ```bash

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import { createContext, useContext, useState, useEffect } from 'react';
 
 const AuthContext = createContext(undefined);
 function AuthProvider({ config, children }) {
@@ -4189,7 +4189,7 @@ function DynamicForm({ fields, onSubmit, submitText = 'Submit', submitVariant =
 function LoginForm({ formId, onSuccess, onError }) {
     const config = useAuthConfig();
     const { formConfig, loading: formLoading, error: formError } = useDynamicForm(formId);
-    const [submitting, setSubmitting] = React.useState(false);
+    const [submitting, setSubmitting] = useState(false);
     const handleSubmit = async (values) => {
         if (!formConfig)
             return;