ant-design/components/form/demo/component-token.tsx
dingkang 477b1ec2f3
feat: migrate less to token for Form (#42774)
* docs: migrate less to token for Form

* feat:  migrate less to token for Form

* feat: migrate less to token for Form

* test: update form snapshots

* feat: migrate less to token for Form

* chore: code clean

* chore: code clean

* feat: form token

* chore: add comment

* chore: update docs

---------

Co-authored-by: MadCcc <1075746765@qq.com>
2023-08-22 17:05:56 +08:00

48 lines
1.1 KiB
TypeScript

import { ConfigProvider, Form, Input } from 'antd';
import React from 'react';
const App: React.FC = () => (
<ConfigProvider
theme={{
components: {
Form: {
labelRequiredMarkColor: 'pink',
labelColor: 'green',
labelFontSize: 16,
labelHeight: 34,
labelColonMarginInlineStart: 4,
labelColonMarginInlineEnd: 12,
itemMarginBottom: 18,
},
},
}}
>
<Form
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
style={{ maxWidth: 600 }}
initialValues={{ remember: true }}
autoComplete="off"
>
<Form.Item
label="Username"
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password />
</Form.Item>
</Form>
</ConfigProvider>
);
export default App;