Ant Design自定义输入框Input组件样式的示例代码_javascript技巧
今天接到一个需求,需要自定义一个Input输入框,我们的项目使用React
+ Ant Design进行开发,按理说Ant Design已经提供了非常丰富的组件样式,但有时候还是无法满足特定的需求,比如我们的输入框要求渲染成下面的样子
而Ant Design的Input组件默认的渲染结果是这样的。
仔细观察这两个输入框,他们的区别如下:
下面我们依次来实现这两个需求:
Ant Design的Input提供了variant属性来控制输入框的样式,我们可以将其设置为underline来实现下划线样式。
Ant Design的Input组件并未提供相关设置,但是Form组件提供了requiredMark属性来控制必选标志的样式,我们可以通过这个属性来自行渲染必选标志,这个方式非常灵活,可以渲染成任何你想要的样子。
函数逻辑也十分简单,首先渲染label。然后当required为true时,渲染一个红色的星号,否则不渲染任何内容。
const customizeRequiredMark = (label: React.ReactNode, { required }: { required: boolean }) => ( <> {label} {required ? * : null} >);
接下来,将Input组件用Form包裹起来,并应用上面的自定义函数即可。
// 使用requiredMark属性来应用自定义的必选标志
完整代码如下:
import { Form, Input } from 'antd';import React from 'react';const customizeRequiredMark = (label: React.ReactNode, { required }: { required: boolean }) => ( <> {label} {required ? * : null} >);export default function CustomizeInput() { return ( );}
今天就到这里了,我们明天见,码字不易,如果觉得有用就关注一下,您的关注,是我持续输出的动力!
到此这篇关于Ant Design如何自定义输入框(Input)组件样式的文章就介绍到这了,更多相关Ant Design如何自定义输入框(Input)组件样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
本文地址: https://www.earthnavs.com/jishuwz/0a7574929c64da74b0a2.html























