快捷導(dǎo)航

Ant?Design自定義輸入框Input組件樣式的示例代碼

更新時(shí)間：2025年07月15日 08:57:02 作者：前端風(fēng)云志

文章介紹如何通過(guò)React+AntDesign自定義Input輸入框樣式,利用variant屬性實(shí)現(xiàn)下劃線邊框,并通過(guò)Form的requiredMark屬性將必選標(biāo)志置于label右側(cè),提供完整代碼示例及關(guān)注鼓勵(lì),感興趣的朋友一起看看吧

介紹

今天接到一個(gè)需求，需要自定義一個(gè)Input輸入框，我們的項(xiàng)目使用React + Ant Design進(jìn)行開(kāi)發(fā)，按理說(shuō)Ant Design已經(jīng)提供了非常豐富的組件樣式，但有時(shí)候還是無(wú)法滿足特定的需求，比如我們的輸入框要求渲染成下面的樣子

而Ant Design的Input組件默認(rèn)的渲染結(jié)果是這樣的。

仔細(xì)觀察這兩個(gè)輸入框，他們的區(qū)別如下：

輸入框的樣式不同，自定義的輸入框要求用下劃線。
必選標(biāo)志（紅色星號(hào)）位置不同，自定義的輸入框必選標(biāo)志在label的右側(cè)。

下面我們依次來(lái)實(shí)現(xiàn)這兩個(gè)需求：

Input組件使用下劃線樣式

Ant Design的Input提供了variant屬性來(lái)控制輸入框的樣式，我們可以將其設(shè)置為underline來(lái)實(shí)現(xiàn)下劃線樣式。

<Input
  variant="underlined" // 設(shè)置下劃線樣式
  style={{ width: '200px' }}
  placeholder="請(qǐng)輸入內(nèi)容"
/>

調(diào)整必選標(biāo)志位置

Ant Design的Input組件并未提供相關(guān)設(shè)置，但是Form組件提供了requiredMark屬性來(lái)控制必選標(biāo)志的樣式，我們可以通過(guò)這個(gè)屬性來(lái)自行渲染必選標(biāo)志，這個(gè)方式非常靈活，可以渲染成任何你想要的樣子。

首先定義一個(gè)函數(shù)用來(lái)渲染自定義的必選標(biāo)志，這個(gè)函數(shù)接受兩個(gè)參數(shù)，一個(gè)是標(biāo)簽，另一個(gè)是boolean變量，用來(lái)指示當(dāng)前控件是否為必選項(xiàng)。

函數(shù)邏輯也十分簡(jiǎn)單，首先渲染label。然后當(dāng)required為true時(shí)，渲染一個(gè)紅色的星號(hào)，否則不渲染任何內(nèi)容。

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

接下來(lái)，將Input組件用Form包裹起來(lái)，并應(yīng)用上面的自定義函數(shù)即可。

// 使用requiredMark屬性來(lái)應(yīng)用自定義的必選標(biāo)志
<Form requiredMark={customizeRequiredMark}>
  <Form.Item
    label='name' name='name'
    rules={[{ required: true }]}>
    <Input
      variant="underlined"
      style={{ width: '200px' }}
      placeholder="請(qǐng)輸入內(nèi)容"
    />
  </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="請(qǐng)輸入內(nèi)容"
        />
      </Form.Item>
    </Form>
  );
}

今天就到這里了，我們明天見(jiàn)，碼字不易，如果覺(jué)得有用就關(guān)注一下，您的關(guān)注，是我持續(xù)輸出的動(dòng)力！

到此這篇關(guān)于Ant Design如何自定義輸入框（Input）組件樣式的文章就介紹到這了,更多相關(guān)Ant Design如何自定義輸入框（Input）組件樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: