Next.js 13中input/button标签字体不生效问题求助

问题分析 #

浏览器对<input>、<button>等表单元素有默认的用户代理样式，会优先覆盖自定义字体配置；同时@next/font的字体可能未正确注入到目标元素，导致CSS中指定的font-family: 'Rubik'无法生效。

解决步骤 #

1. 确保@next/font字体正确全局注入 #

在app/layout.jsx（你提到的layout.jsp应为笔误）中正确配置Rubik字体，并将字体类全局应用到根元素：

// app/layout.jsx
import { Rubik } from '@next/font/google';

// 匹配CSS中用到的700权重配置字体
const rubik = Rubik({
  subsets: ['latin'],
  weight: ['700'],
  // 可选：用CSS变量统一管理字体，后续CSS可直接引用
  variable: '--font-rubik',
});

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN" className={rubik.className}>
      <body>{children}</body>
    </html>
  );
}

2. 强制覆盖表单元素默认字体 #

在CSS中添加高优先级声明，确保覆盖浏览器默认样式：

/* 方法1：全局覆盖所有表单元素 */
input, button, textarea, select {
  font-family: inherit !important;
}

/* 方法2：精准覆盖登录组件内的目标元素 */
.email-input, .email-btn, .google-btn {
  /* 若用了CSS变量，可替换为 var(--font-rubik), sans-serif; */
  font-family: 'Rubik', sans-serif !important;
}

3. 修复组件未定义变量问题 #

你的登录组件中使用了setEmail但未声明状态，需补充useState：

'use client'
import { useState } from 'react'; // 新增
import { signIn } from "next-auth/react"
import '../../globals.css'

export default function Providers({ providers }) {
  const [email, setEmail] = useState(''); // 新增状态声明

  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }} >
      <div className="login-card" >
        <h1>Log-in</h1>
        <form className="email-form" method="post" action="/api/auth/signin/email">
          <input className="email-input" placeholder="email" type="text" id="email" name="email" onChange={e => setEmail(e.target.value)} />
          <button className="email-btn" onClick={() => signIn('email', { callback: '/', email })} type="submit" >Sign in</button>
          <button className="google-btn" onClick={() => signIn(providers.google.id)}>Google</button>
        </form>
      </div>
    </div>
  )
}

4. 验证字体加载状态 #

打开浏览器开发者工具：

• 进入Elements > Computed > Fonts，查看目标元素实际应用的字体是否为Rubik
• 若字体未加载，检查@next/font的配置（如subsets、weight是否与需求匹配）

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