Ant Design如何自定义输入框(Input)组件样式

介绍

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

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

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

  1. 输入框的样式不同,自定义的输入框要求用下划线。
  2. 必选标志(红色星号)位置不同,自定义的输入框必选标志在label的右侧。

下面我们依次来实现这两个需求:

Input组件使用下划线样式

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

tsx 复制代码
<Input
  variant="underlined" // 设置下划线样式
  style={{ width: '200px' }}
  placeholder="请输入内容"
/>

调整必选标志位置

Ant Design的Input组件并未提供相关设置,但是Form组件提供了requiredMark属性来控制必选标志的样式,我们可以通过这个属性来自行渲染必选标志,这个方式非常灵活,可以渲染成任何你想要的样子。

首先定义一个函数用来渲染自定义的必选标志,这个函数接受两个参数,一个是标签,另一个是boolean变量,用来指示当前控件是否为必选项。

函数逻辑也十分简单,首先渲染label。然后当requiredtrue时,渲染一个红色的星号,否则不渲染任何内容。

tsx 复制代码
const customizeRequiredMark = (label: React.ReactNode, { required }: { required: boolean }) => (
  <>
    {label}
    {required ? <span style={{color: 'red'}}>*</span> : null}
  </>
);

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

jsx 复制代码
// 使用requiredMark属性来应用自定义的必选标志
<Form requiredMark={customizeRequiredMark}>
  <Form.Item
    label='name' name='name'
    rules={[{ required: true }]}>
    <Input
      variant="underlined"
      style={{ width: '200px' }}
      placeholder="请输入内容"
    />
  </Form.Item>
</Form>

完整代码如下:

tsx 复制代码
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>
  );
}

今天就到这里了,我们明天见,码字不易,如果觉得有用就关注一下,您的关注,是我持续输出的动力!

相关推荐
叫我阿柒啊1 天前
Java全栈工程师的实战面试:从Vue到Spring Boot的技术旅程
java·spring boot·微服务·vue·api·react·rest
OEC小胖胖1 天前
React学习之路永无止境:下一步,去向何方?
前端·javascript·学习·react.js·前端框架·react·web
OEC小胖胖2 天前
给你的应用穿上“外衣”:React中的CSS方案对比与实践
前端·前端框架·react·web
lypzcgf2 天前
Coze源码分析-资源库-创建提示词-前端源码
前端·人工智能·typescript·系统架构·开源软件·react·安全架构
袋鼠云数栈前端4 天前
实现一个 AI 编辑器 - 行内代码生成篇
大数据·ai·react
lypzcgf5 天前
Coze源码分析-工作空间-项目开发-前端源码
前端·人工智能·typescript·系统架构·开源软件·react·安全架构
OEC小胖胖5 天前
掌握表单:React中的受控组件与表单处理
前端·javascript·react.js·前端框架·react·web
Fez71111 天前
Momentjs对象可变性导致DatePicker异常(React+Antd)
react.js·ant design
阿࿆杰࿆15 天前
solon-flow基于bpmnJs的流程设计器
vue·流程图·react