### 修改 antd-mobile 中 Form.Item 的字体大小 在 antd-mobile 中，如果需要全局修改 `Form.Item` 的字体大小，可以通过覆盖默认样式的方式实现。以下是具体方法： #### 方法一：通过 CSS 覆盖默认样式 可以利用 antd-mobile 提供的类名来覆盖其默认样式。例如，`Form.Item` 默认会应用 `.am-form-item-label` 和 `.am-form-item-control` 类名[^1]。 ```css /* 修改 label 的字体大小 */ .am-form-item-label { font-size: 14px !important; } /* 修改 input 或其他控件的字体大小 */ .am-form-item-control { font-size: 14px !important; } ``` 将以上代码添加到项目的全局样式文件中（如 `index.css` 或 `App.css`）。这样就可以全局生效。 --- #### 方法二：使用自定义主题变量 antd-mobile 支持通过 Less 变量来自定义组件样式。如果你的项目支持 Less 文件编译，可以在项目的入口处引入并重写这些变量。 首先，在项目的根目录创建一个 `custom.less` 文件，并添加如下内容： ```less @form-item-label-font-size: 14px; /* 设置 Label 的字体大小 */ @font-size-base: 14px; /* 基础字体大小，影响输入框等控件 */ ``` 接着，在项目的入口文件（如 `index.js`）中引入该文件以及 antd-mobile 的样式文件： ```javascript import 'antd-mobile/dist/antd-mobile.css'; import './custom.less'; ``` 这种方法更加灵活，适合需要大规模定制样式的场景。 --- #### 方法三：动态注入样式 如果不想依赖全局样式或者 Less 文件，也可以通过 JavaScript 动态注入样式。这种方式适用于运行时调整样式的情况。 ```javascript const injectStyle = () => { const styleSheet = document.createElement('style'); styleSheet.type = 'text/css'; styleSheet.innerHTML = ` .am-form-item-label { font-size: 14px !important; } .am-form-item-control { font-size: 14px !important; } `; document.head.appendChild(styleSheet); }; injectStyle(); ``` 将其放置在应用程序初始化的地方即可。 --- #### 注意事项 - 如果使用的是 React Native 版本的 antd-mobile，则需要参考特定文档中的样式覆盖方式[^3]。 - 使用 `!important` 是为了确保优先级高于框架自带的样式，但在实际开发中应尽量减少这种做法。 - 确保项目的 Webpack 配置能够正确解析 Less 文件（如果是第二种方法）。 --- ### 示例代码 以下是一个完整的示例，展示如何结合表单验证库（如 Formik 和 Yup）与自定义样式的 `Form.Item`： ```jsx import React from 'react'; import { Formik, Form, Field } from 'formik'; import * as Yup from 'yup'; // 定义校验规则 const validationSchema = Yup.object().shape({ name: Yup.string().required('请输入名字'), }); function MyCustomFormItem({ children, ...props }) { return ( <div className="my-custom-form-item"> <Field {...props}>{children}</Field> </div> ); } function App() { return ( <Formik initialValues={{ name: '' }} validationSchema={validationSchema} onSubmit={(values) => console.log(values)} > {({ errors, touched }) => ( <Form> {/* 自定义 Form.Item */} <MyCustomFormItem name="name" placeholder="姓名" /> {errors.name && touched.name ? ( <div>{errors.name}</div> ) : null} <button type="submit">提交</button> </Form> )} </Formik> ); } export default App; // 全局样式 import './styles.css'; ``` 其中，`styles.css` 文件的内容为： ```css .my-custom-form-item .am-field-input { font-size: 16px !important; } ``` --- ###