Laravel 10+React项目：如何在Login页使用TextInput组件的className

1. 修复TextInput组件，支持合并自定义className #

当前TextInput组件未使用传入的className属性，需要将内置默认样式与外部传入的样式合并：

import { forwardRef, useEffect, useRef } from "react";

export default forwardRef(
    function TextInput({ type = "text", className, isFocused = false, ...props }, ref) {
        const input = ref ? ref : useRef();

        useEffect(() => {
            if (isFocused) {
                input.current.focus();
            }
        }, [isFocused]); // 补全依赖项，确保isFocused变化时重新执行焦点逻辑

        // 合并默认样式与外部传入的className
        const inputClassName = `rounded-2xl bg-form-bg py-[13px] px-7 w-full focus:outline-alerange focus:outline-none ${className || ''}`;

        return (
            <input
                {...props}
                type={type}
                className={inputClassName}
                ref={input}
            />
        );
    }
);

2. 在Login.jsx中替换原生input为TextInput组件 #

将表单内的原生<input>替换为导入的TextInput组件，传递对应属性即可继承组件样式：

import React from "react";
import TextInput from "@/Components/TextInput";

export default function Login() {
    return (
        <div className="mx-auto max-w-screen min-h-screen bg-black text-white md:px-10 px-3">
            <div className="fixed top-[-50px] hidden lg:block">
                <img
                    src="/images/signup-image.png"
                    className="hidden laptopLg:block laptopLg:max-w-[450px] laptopXl:max-w-[640px]"
                    alt=""
                />
            </div>
            <div className="py-24 flex laptopLg:ml-[680px] laptopXl:ml-[870px]">
                <div>
                    <img src="/images/moonton-white.svg" alt="" />
                    <div className="my-[70px]">
                        <div className="font-semibold text-[26px] mb-3">
                            Welcome Back
                        </div>
                        <p className="text-base text-[#767676] leading-7">
                            Explore our new movies and get <br />
                            the better insight for your life
                        </p>
                    </div>
                    <form className="w-[370px]">
                        <div className="flex flex-col gap-6">
                            <div>
                                <label className="text-base block mb-2">
                                    Email Address
                                </label>
                                {/* 替换为TextInput组件 */}
                                <TextInput
                                    type="email"
                                    name="email"
                                    placeholder="Email Address"
                                    // 如需额外自定义样式，可在此传入className，例：className="extra-class"
                                />
                            </div>
                            <div>
                                <label className="text-base block mb-2">
                                    Password
                                </label>
                                {/* 替换为TextInput组件 */}
                                <TextInput
                                    type="password"
                                    name="password"
                                    placeholder="Password"
                                />
                            </div>
                        </div>
                        <div className="grid space-y-[14px] mt-[30px]">
                            <a
                                href="/"
                                className="rounded-2xl bg-alerange py-[13px] text-center"
                            >
                                <span className="text-base font-semibold">
                                    Start Watching
                                </span>
                            </a>
                            <a
                                href="sign_up.html"
                                className="rounded-2xl border border-white py-[13px] text-center"
                            >
                                <span className="text-base text-white">
                                    Create New Account
                                </span>
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    );
}

核心说明 #

• TextInput通过字符串拼接实现默认样式与自定义样式的合并，既保留组件基础样式，又支持外部扩展。
• 补全useEffect依赖项，确保焦点逻辑能响应isFocused属性的变化。
• Login页面只需替换原生input为TextInput并传递必要属性，即可自动应用组件内置样式。

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