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

更新時間：2025年07月15日 08:57:02 作者：前端風云志

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

介紹

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

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

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

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

下面我們依次來實現(xiàn)這兩個需求：

Input組件使用下劃線樣式

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

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

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

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

首先定義一個函數(shù)用來渲染自定義的必選標志，這個函數(shù)接受兩個參數(shù)，一個是標簽，另一個是boolean變量，用來指示當前控件是否為必選項。

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

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

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

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

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

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

您可能感興趣的文章: