Ant Design如何自定义输入框（Input）组件样式

介绍

今天接到一个需求，需要自定义一个Input输入框，我们的项目使用React + Ant Design进行开发，按理说Ant Design已经提供了非常丰富的组件样式，但有时候还是无法满足特定的需求，比如我们的输入框要求渲染成下面的样子

而Ant Design的Input组件默认的渲染结果是这样的。

仔细观察这两个输入框，他们的区别如下：

• 输入框的样式不同，自定义的输入框要求用下划线。
  
• 必选标志（红色星号）位置不同，自定义的输入框必选标志在label的右侧。
  

下面我们依次来实现这两个需求：
Input组件使用下划线样式

Ant Design的Input提供了variant属性来控制输入框的样式，我们可以将其设置为underline来实现下划线样式。

1. [/code][size=5]调整必选标志位置[/size]
3. Ant Design的Input组件并未提供相关设置，但是Form组件提供了requiredMark属性来控制必选标志的样式，我们可以通过这个属性来自行渲染必选标志，这个方式非常灵活，可以渲染成任何你想要的样子。
4. 首先定义一个函数用来渲染自定义的必选标志，这个函数接受两个参数，一个是标签，另一个是boolean变量，用来指示当前控件是否为必选项。
5. 函数逻辑也十分简单，首先渲染label。然后当required为true时，渲染一个红色的星号，否则不渲染任何内容。
6. [code]const customizeRequiredMark = (label: React.ReactNode, { required }: { required: boolean }) => (
7.   <>
8.     {label}
9.     {required ? * : null}
10.   </>
11. );

复制代码

接下来，将Input组件用Form包裹起来，并应用上面的自定义函数即可。

1. // 使用requiredMark属性来应用自定义的必选标志
2. <Form requiredMark={customizeRequiredMark}>
3.   <Form.Item
4.     label='name' name='name'
5.     rules={[{ required: true }]}>
6.     <Input
7.       variant="underlined"
8.       style={{ width: '200px' }}
9.       placeholder="请输入内容"
10.     />
11.   </Form.Item>
12. </Form>

复制代码

完整代码如下：

1. import { Form, Input } from 'antd';import React from 'react';const customizeRequiredMark = (label: React.ReactNode, { required }: { required: boolean }) => (
2.   <>
3.     {label}
4.     {required ? * : null}
5.   </>
6. );export default function CustomizeInput() {  return (                              );}

复制代码

今天就到这里了，我们明天见，码字不易，如果觉得有用就关注一下，您的关注，是我持续输出的动力！
出处：http://www.cnblogs.com/graphics/本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利.
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！