Ant Design自定义输入框Input组件样式的示例代码
更新时间：2025年07月15日 08:57:02 作者：前端风云志
文章介绍如何通过React+AntDesign自定义Input输入框样式,利用variant属性实现下划线边框,并通过Form的requiredMark属性将必选标志置于label右侧,提供完整代码示例及关注鼓励,感兴趣的朋友一起看看吧
介绍
今天接到一个需求，需要自定义一个Input输入框，我们的项目使用React + Ant Design进行开发，按理说Ant Design已经提供了非常丰富的组件样式，但有时候还是无法满足特定的需求，比如我们的输入框要求渲染成下面的样子
而Ant Design的Input组件默认的渲染结果是这样的。
仔细观察这两个输入框，他们的区别如下：
- 输入框的样式不同，自定义的输入框要求用下划线。
- 必选标志（红色星号）位置不同，自定义的输入框必选标志在label的右侧。
下面我们依次来实现这两个需求：
Input组件使用下划线样式
Ant Design的Input提供了variant属性来控制输入框的样式，我们可以将其设置为underline来实现下划线样式。
<Input
variant="underlined" // 设置下划线样式
style={{ width: '200px' }}
placeholder="请输入内容"
/>调整必选标志位置
Ant Design的Input组件并未提供相关设置，但是Form组件提供了requiredMark属性来控制必选标志的样式，我们可以通过这个属性来自行渲染必选标志，这个方式非常灵活，可以渲染成任何你想要的样子。
首先定义一个函数用来渲染自定义的必选标志，这个函数接受两个参数，一个是标签，另一个是boolean变量，用来指示当前控件是否为必选项。
函数逻辑也十分简单，首先渲染label。然后当required为true时，渲染一个红色的星号，否则不渲染任何内容。
const customizeRequiredMark = (label: React.ReactNode, { required }: { required: boolean }) => (
<>
{label}
{required ? <span style={{color: 'red'}}>*</span> : null}
</>
);接下来，将Input组件用Form包裹起来，并应用上面的自定义函数即可。
// 使用requiredMark属性来应用自定义的必选标志
<Form requiredMark={customizeRequiredMark}>
<Form.Item
label='name' name='name'
rules={[{ required: true }]}>
<Input
variant="underlined"
style={{ width: '200px' }}
placeholder="请输入内容"
/>
</Form.Item>
</Form>完整代码如下：
import { Form, Input } from 'antd';
import React from 'react';
const customizeRequiredMark = (label: React.ReactNode, { required }: { required: boolean }) => (
<>
{label}
{required ? <span style={{color: 'red'}}>*</span> : null}
</>
);
export default function CustomizeInput() {
return (
<Form requiredMark={customizeRequiredMark}>
<Form.Item
label='name' name='name'
rules={[{ required: true }]}>
<Input
variant="underlined"
style={{ width: '200px' }}
placeholder="请输入内容"
/>
</Form.Item>
</Form>
);
}今天就到这里了，我们明天见，码字不易，如果觉得有用就关注一下，您的关注，是我持续输出的动力！
到此这篇关于Ant Design如何自定义输入框（Input）组件样式的文章就介绍到这了,更多相关Ant Design如何自定义输入框（Input）组件样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
一种Javascript解释ajax返回的json的好方法(推荐)
下面小编就为大家带来一篇一种Javascript解释ajax返回的json的好方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
本文给大家介绍js调用百度地图的方法以及调用百度地图的搜索功能，有需要的朋友可以跟着脚本之家的小编一起学习2015-09-09
近几年随着JavaScript开发模式的逐渐成熟，CommonJS规范顺势而生，其中就包括提出了Promise规范，Promise完全改变了js异步编程的写法，让异步编程变得十分的易于理解2014-08-08
本文主要给大家介绍了javascript的一些函数定义方面的基础知识，包括函数声明式、函数表达式、Function 构造函数等，十分的简单实用，有需要的小伙伴可以参考下。2015-06-06![JavaScript中将一个值转换为字符串的方法分析[译]](//img.jbzj.com/images/xgimg/bcimg4.png)
在JavaScript中,主要有三种方法能让任意值转换为字符串.本文讲解了每种方法以及各自的优缺点2012-09-09
这篇文章主要介绍了基于javascript处理nginx请求过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
这是一款仿照百度图片的瀑布流效果，可以无限加载,兼容各大主流浏览器，这里分享给大家，希望小伙伴们能够喜欢2016-04-04
Moment.js是一个轻量级的JavaScript时间库,通常会对时间进行下面这几个操作：比如获取时间,设置时间,格式化时间,比较时间等等,本文就来介绍一下如何使用,感兴趣的可以了解下2023-09-09
这篇文章主要为大家详细介绍了OpenLayer3自定义测量控件MeasureTool，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要为大家详细介绍了基于javascript实现动态时钟效果的相关资料，动态显示系统当前时间，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-02-02
![JavaScript中将一个值转换为字符串的方法分析[译]](http://img.jbzj.com/images/xgimg/bcimg4.png)
最新评论