MUI TextField: 변형, 색상 및 스타일 구축

mui 텍스트 필드는 Material-UI의 기본 구성 요소로, 사용자 입력을 효율적이고 세련되게 캡처하도록 설계되었습니다. 이 가이드에서는 빌드 변형, 색상과 스타일을 통한 광범위한 사용자 정의, 애플리케이션의 UI/UX를 향상시키는 실제 사용 사례를 살펴봅니다.

MUI 텍스트 필드 소개

mui 텍스트 필드는 웹 애플리케이션의 사용자 입력을 위한 적응성이 뛰어난 인터페이스 구성 요소를 제공하여 다양한 스타일, 구성 및 사용자 상호 작용을 지원합니다. 간단한 텍스트 입력, 비밀번호 또는 더 복잡한 여러 줄 항목을 수집하는 경우 mui 텍스트 필드는 강력한 사용자 정의 옵션을 통해 이러한 요구를 충족할 수 있는 유연성을 제공합니다.

기본 텍스트 필드

Material-UI는 기본 mui 텍스트 필드에 대해 서로 다른 UI 기본 설정 및 사용자 경험에 맞게 조정된 세 가지 고유한 빌드 변형을 제공합니다.

1. 표준: 초점에서 눈에 띄는 밑줄을 사용하여 미니멀리스트 접근 방식을 제공합니다. 인터페이스가 어수선하지 않은 깨끗하고 현대적인 디자인에 이상적입니다.
2. 채움: 이 변형은 밝은 배경 채우기와 필드가 활성화될 때만 나타나는 밑줄을 도입하여 미묘한 깊이와 강조를 추가합니다.
3. 개요: 텍스트 필드 주위에 완전한 테두리가 있어 다양한 배경에서 가시성이 향상되고 대화형 요소에 대한 명확한 경계를 제공합니다.

코드로 구현:

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';


// BasicTextFields Component: Demonstrates different TextField variants.
export default function BasicTextFields() {
  return (
    // Container component for form elements with specified margins and width
    <box component="form" sx="{{"> :not(style)': { m: 1, width: '25ch' } }} // Apply margin and width to each TextField
      noValidate // Disables browser validation
      autoComplete="off" // Disables autocomplete feature
    >
      {/* Outlined TextField: Uses a border to define the input area */}
      <textfield id="outlined-basic" label="Outlined" variant="outlined"></textfield>


      {/* Filled TextField: Includes a background fill to highlight the input area */}
      <textfield id="filled-basic" label="Filled" variant="filled"></textfield>


      {/* Standard TextField: Features a minimalist design with a bottom underline */}
      <textfield id="standard-basic" label="Standard" variant="standard"></textfield>
    </box>
  );
}

양식 소품

mui 텍스트 필드는 기능과 사용자 상호 작용을 향상시키는 다양한 표준 양식 속성을 처리할 수 있는 기능을 갖추고 있습니다. 이러한 속성에는 사용자 입력을 안내하고 양식 무결성을 유지하는 데 필수적인 필수, 비활성화 및 유형과 같은 옵션이 포함됩니다. 또한 helperText 소품은 필드 입력에 대한 컨텍스트를 제공하고 유틸리티를 설명하거나 예상 형식에 대한 지침을 제공하는 데 특히 유용합니다.

다음은 주요 양식 소품입니다:

• 필수: 필드를 필수로 표시하여 사용자에게 양식을 제출하기 전에 해당 필드를 작성하라는 메시지를 표시합니다. 이는 모든 필수 정보를 수집하는 데 매우 중요합니다.
• disabled: 입력 필드를 일시적으로 비활성화하여 비대화형으로 만듭니다. 이는 사용자 입력을 수락하기 전에 특정 조건을 충족해야 하는 시나리오에서 유용합니다.
• 유형: 텍스트, 비밀번호, 숫자 등 텍스트 필드에 예상되는 데이터 유형을 정의합니다. 이는 양식 데이터를 올바르게 구성하는 데 도움이 되며 사용자 입력이 필수 형식과 일치하도록 보장합니다.
• helperText: 입력 필드와 관련된 추가 세부 정보 또는 지침을 제공합니다. 이는 데이터의 목적을 명확히 하거나 사용자에게 양식을 올바르게 작성하는 방법을 안내하는 데 사용될 수 있습니다.

코드로 구현:

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';


// FormPropsTextFields Component: Showcases TextField with various props and states.
export default function FormPropsTextFields() {
  return (
    // Container for the form elements with specified margins and width
    <box component="form" sx="{{" .muitextfield-root m: width: novalidate disables html5 validation autocomplete="off" turns off auto-completion>
      {/* Section for Outlined TextFields with various configurations */}
      <div>
        <textfield required id="outlined-required" label="Required" defaultvalue="Hello World" pre-filled text></textfield>
        <textfield disabled id="outlined-disabled" label="Disabled" defaultvalue="Hello World" pre-filled text non-interactive></textfield>
        <textfield id="outlined-password-input" label="Password" type="password" hides the text input autocomplete="current-password"></textfield>
        <textfield id="outlined-read-only-input" label="Read Only" defaultvalue="Hello World" slotprops="{{" input: readonly: true non-editable input></textfield>
        <textfield id="outlined-number" label="Number" type="number" numeric input slotprops="{{" inputlabel: shrink: true configuration></textfield>
        <textfield id="outlined-search" label="Search field" type="search" optimized for search input></textfield>
        <textfield id="outlined-helperText" label="Helper text" defaultvalue="Default Value" helpertext="Some important text" additional information for the user></textfield>
      </div>
      {/* Section for Filled TextFields, similar configurations as above, different variant */}
      <div>
        <textfield required id="filled-required" label="Required" defaultvalue="Hello World" variant="filled"></textfield>
        <textfield disabled id="filled-disabled" label="Disabled" defaultvalue="Hello World" variant="filled"></textfield>
        // Remaining Filled TextFields omitted for brevity
      </div>
      {/* Section for Standard TextFields, similar configurations as above, different variant */}
      <div>
        <textfield required id="standard-required" label="Required" defaultvalue="Hello World" variant="standard"></textfield>
        <textfield disabled id="standard-disabled" label="Disabled" defaultvalue="Hello World" variant="standard"></textfield>
        // Remaining Standard TextFields omitted for brevity
      </div>
    </box>
  );
}

여러 줄 텍스트 필드

mui 텍스트 필드의 여러 줄 속성은 표준 텍스트 필드를 TextareaAutosize 요소로 변환하는 강력한 기능으로, 댓글, 설명 또는 피드백 양식과 같이 긴 텍스트 항목이 필요한 입력에 이상적입니다. 이 기능은 사용자가 한 줄의 텍스트를 초과하는 자세한 정보를 제공해야 하는 양식에 특히 유용합니다.

텍스트 필드의 크기를 더 세밀하게 제어해야 하는 시나리오의 경우 minRows 및 maxRows 소품을 사용하여 높이에 대한 최소 및 최대 경계를 설정할 수 있습니다. 이는 특정 레이아웃 미학을 유지하려는 경우나 특정 길이 제한 내에 있을 것으로 예상되는 양식 입력을 처리할 때 특히 유용합니다.

코드로 구현:

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';


// MULTILINE TEXT FIELDS COMPONENT: Demonstrates various multiline TextField configurations.
export default function MultilineTextFields() {
  return (
    // Container for the multiline TextField elements with specified margins and width
    <box component="form" sx="{{" .muitextfield-root m: width: novalidate disables browser validation autocomplete="off" turns off auto-completion>
      {/* OUTLINED TEXTFIELDS GROUP */}
      <div>
        <textfield id="outlined-multiline-flexible" label="Multiline" multiline maxrows="{4}" allows flexible number of rows up to></textfield>
        <textfield id="outlined-textarea" label="Multiline Placeholder" placeholder="Placeholder" text for empty field multiline></textfield>
        <textfield id="outlined-multiline-static" label="Multiline" multiline rows="{4}" fixed number of defaultvalue="Default Value" pre-filled text></textfield>
      </div>


      {/* FILLED TEXTFIELDS GROUP */}
      <div>
        <textfield id="filled-multiline-flexible" label="Multiline" multiline maxrows="{4}" variant="filled" filled style></textfield>
        <textfield id="filled-textarea" label="Multiline Placeholder" placeholder="Placeholder" multiline variant="filled"></textfield>
        <textfield id="filled-multiline-static" label="Multiline" multiline rows="{4}" defaultvalue="Default Value" variant="filled"></textfield>
      </div>


      {/* STANDARD TEXTFIELDS GROUP */}
      <div>
        <textfield id="standard-multiline-flexible" label="Multiline" multiline maxrows="{4}" variant="standard" standard style></textfield>
        <textfield id="standard-textarea" label="Multiline Placeholder" placeholder="Placeholder" multiline variant="standard"></textfield>
        <textfield id="standard-multiline-static" label="Multiline" multiline rows="{4}" defaultvalue="Default Value" variant="standard"></textfield>
      </div>
    </box>
  );
}

선택하다

mui 텍스트 필드의 select 소품은 Select 구성 요소를 내부적으로 통합하여 표준 텍스트 필드를 드롭다운 메뉴로 변환합니다. 이 수정을 통해 사전 정의된 옵션 중에서 원활하게 선택할 수 있으므로 사용자가 세트 목록에서 선택해야 하는 양식에 특히 유용합니다.

코드로 구현:

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';


// Currency options for the select dropdown.
const currencies = [
  { value: 'USD', label: '$' },
  { value: 'EUR', label: '€' },
  { value: 'BTC', label: '฿' },
  { value: 'JPY', label: '¥' },
];


// SELECT TEXT FIELDS COMPONENT: Demonstrates TextField with select dropdowns.
export default function SelectTextFields() {
  return (
    // Container for the select TextField elements with specified margins and width
    <box component="form" sx="{{" .muitextfield-root m: width: novalidate disables browser validation autocomplete="off" turns off auto-completion>
      {/* OUTLINED SELECT TEXTFIELDS GROUP */}
      <div>
        <textfield id="outlined-select-currency" select label="Select" defaultvalue="EUR" pre-selected currency helpertext="Please select your currency" additional information for the user>
          {currencies.map((option) => (
            <menuitem key="{option.value}" value="{option.value}">
              {option.label}
            </menuitem>
          ))}
        </textfield>
        <textfield id="outlined-select-currency-native" select label="Native select" defaultvalue="EUR" slotprops="{{" select: native: true uses native element helpertext="Please select your currency">
          {currencies.map((option) => (
            <option key="{option.value}" value="{option.value}">
              {option.label}
            </option>
          ))}
        </textfield>
      </div>


      {/* FILLED SELECT TEXTFIELDS GROUP */}
      <div>
        <textfield id="filled-select-currency" select label="Select" defaultvalue="EUR" variant="filled" filled style helpertext="Please select your currency">
          {currencies.map((option) => (
            <menuitem key="{option.value}" value="{option.value}">
              {option.label}
            </menuitem>
          ))}
        </textfield>
        <textfield id="filled-select-currency-native" select label="Native select" defaultvalue="EUR" variant="filled" slotprops="{{" select: native: true helpertext="Please select your currency">
          {currencies.map((option) => (
            <option key="{option.value}" value="{option.value}">
              {option.label}
            </option>
          ))}
        </textfield>
      </div>


      {/* STANDARD SELECT TEXTFIELDS GROUP */}
      <div>
        <textfield id="standard-select-currency" select label="Select" defaultvalue="EUR" variant="standard" standard style helpertext="Please select your currency">
          {currencies.map((option) => (
            <menuitem key="{option.value}" value="{option.value}">
              {option.label}
            </menuitem>
          ))}
        </textfield>
        <textfield id="standard-select-currency-native" select label="Native select" defaultvalue="EUR" variant="standard" slotprops="{{" select: native: true helpertext="Please select your currency">
          {currencies.map((option) => (
            <option key="{option.value}" value="{option.value}">
              {option.label}
            </option>
          ))}
        </textfield>
      </div>
    </box>
  );
}

Input Adornments

Input Adornments in Material-UI's mui textfield offer a flexible way to incorporate additional elements like prefixes, suffixes, or interactive icons directly within the text field.

Implementation with Code:

import * as React from 'react';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import Input from '@mui/material/Input';
import FilledInput from '@mui/material/FilledInput';
import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import InputAdornment from '@mui/material/InputAdornment';
import FormHelperText from '@mui/material/FormHelperText';
import FormControl from '@mui/material/FormControl';
import TextField from '@mui/material/TextField';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';


// INPUT ADORNMENTS COMPONENT: Demonstrates various ways to use Input Adornments with TextField and FormControl.
export default function InputAdornments() {
  const [showPassword, setShowPassword] = React.useState(false);


  const handleClickShowPassword = () => setShowPassword((show) => !show);
  const handleMouseDownPassword = (event) => event.preventDefault();
  const handleMouseUpPassword = (event) => event.preventDefault();


  return (
    <box sx="{{" display: flexwrap:>
      {/* OUTLINED VARIANT GROUP */}
      <div>
        <textfield label="With normal TextField" id="outlined-start-adornment" sx="{{" m: width: inputprops="{{" startadornment: position="start">kg,
          }}
        />
        <formcontrol sx="{{" m: width: variant="outlined">
          <outlinedinput id="outlined-adornment-weight" endadornment="{<InputAdornment" position="end">kg}
            aria-describedby="outlined-weight-helper-text"
          />
          <formhelpertext id="outlined-weight-helper-text">Weight</formhelpertext>
        </outlinedinput></formcontrol>
        <formcontrol sx="{{" m: width: variant="outlined">
          <inputlabel htmlfor="outlined-adornment-password">Password</inputlabel>
          <outlinedinput id="outlined-adornment-password" type="{showPassword" : endadornment="{" position="end">
                <iconbutton aria-label="toggle password visibility" onclick="{handleClickShowPassword}" onmousedown="{handleMouseDownPassword}" onmouseup="{handleMouseUpPassword}" edge="end">
                  {showPassword ? <visibilityoff></visibilityoff> : <visibility></visibility>}
                </iconbutton>
              
            }
            label="Password"
          />
        </outlinedinput></formcontrol>
        <formcontrol fullwidth sx="{{" m:>
          <inputlabel htmlfor="outlined-adornment-amount">Amount</inputlabel>
          <outlinedinput id="outlined-adornment-amount" startadornment="{<InputAdornment" position="start">$}
            label="Amount"
          />
        </outlinedinput></formcontrol>
      </textfield>
</div>
      {/* FILLED VARIANT GROUP */}
      <div>
        <textfield label="With normal TextField" id="filled-start-adornment" sx="{{" m: width: inputprops="{{" startadornment: position="start">kg,
          }}
          variant="filled"
        />
        <formcontrol sx="{{" m: width: variant="filled">
          <filledinput id="filled-adornment-weight" endadornment="{<InputAdornment" position="end">kg}
            aria-describedby="filled-weight-helper-text"
          />
          <formhelpertext id="filled-weight-helper-text">Weight</formhelpertext>
        </filledinput></formcontrol>
        <formcontrol sx="{{" m: width: variant="filled">
          <inputlabel htmlfor="filled-adornment-password">Password</inputlabel>
          <filledinput id="filled-adornment-password" type="{showPassword" : endadornment="{" position="end">
                <iconbutton aria-label="toggle password visibility" onclick="{handleClickShowPassword}" onmousedown="{handleMouseDownPassword}" onmouseup="{handleMouseUpPassword}" edge="end">
                  {showPassword ? <visibilityoff></visibilityoff> : <visibility></visibility>}
                </iconbutton>
              
            }
          />
        </filledinput></formcontrol>
        <formcontrol fullwidth sx="{{" m: variant="filled">
          <inputlabel htmlfor="filled-adornment-amount">Amount</inputlabel>
          <filledinput id="filled-adornment-amount" startadornment="{<InputAdornment" position="start">$}
          />
        </filledinput></formcontrol>
      </textfield>
</div>
      {/* STANDARD VARIANT GROUP */}
      <div>
        <textfield label="With normal TextField" id="standard-start-adornment" sx="{{" m: width: inputprops="{{" startadornment: position="start">kg,
          }}
          variant="standard"
        />
        <formcontrol variant="standard" sx="{{" m: mt: width:>
          <input id="standard-adornment-weight" endadornment="{<InputAdornment" position="end">kg}
            aria-describedby="standard-weight-helper-text"
          />
          <formhelpertext id="standard-weight-helper-text">Weight</formhelpertext>
        </formcontrol>
        <formcontrol sx="{{" m: width: variant="standard">

         <input id="standard-adornment-password" type="{showPassword" : endadornment="{" position="end">
            <iconbutton aria-label="toggle password visibility" onclick="{handleClickShowPassword}" onmousedown="{handleMouseDownPassword}" onmouseup="{handleMouseUpPassword}">
              {showPassword ? <visibilityoff></visibilityoff> : <visibility></visibility>}
            </iconbutton>
          
        }
      />
    </formcontrol>
    <formcontrol fullwidth sx="{{" m: variant="standard">
      <inputlabel htmlfor="standard-adornment-amount">Amount</inputlabel>
      <input id="standard-adornment-amount" startadornment="{<InputAdornment" position="start">$}
      />
    </formcontrol>
  </textfield>
</div>
</box>
)
};

Margin

The margin prop in the mui textfield component is a practical attribute that allows you to control the vertical spacing of the text field within a form. This can be crucial for achieving the desired layout and ensuring that the form is visually appealing.

The margin prop accepts three values: none, dense, and normal. Each of these settings adjusts the amount of space around the text field, affecting how compact or spread out the form elements appear.

• none (default): Applies no additional margin to the TextField. This setting is useful when you want to handle spacing through other means, such as using grid systems or custom CSS.
• dense: Reduces the amount of vertical space around the text field. This is ideal for forms where space is limited or when many elements need to be displayed without overwhelming the user.
• normal: Increases the vertical spacing for better readability and separation between fields. This setting is often used in forms where clarity and ease of use are prioritized.

Implementation with Code:

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';


// RedBar Component: Displays a red horizontal bar to visually separate elements.
function RedBar() {
  return (
    // Styling applied using a function to access the theme for conditional styles
    <box sx="{(theme)"> ({
        height: 20, // Fixed height for the bar
        backgroundColor: 'rgba(255, 0, 0, 0.1)', // Light red background color
        ...theme.applyStyles('dark', { // Conditional style application for dark themes
          backgroundColor: 'rgb(255 132 132 / 25%)',
        }),
      })}
    />
  );
}


// LayoutTextFields Component: Demonstrates TextField components with different margin settings.
export default function LayoutTextFields() {
  return (
    <box sx="{{" display: flexbox container for layout flexdirection: arranges children vertically .muitextfield-root width: standard width applied to all textfields>
      <redbar></redbar>
      <textfield label="{'margin="none"'}" id="margin-none"></textfield> // TextField with no margin
      <redbar></redbar>
      <textfield label="{'margin="dense"'}" id="margin-dense" margin="dense"></textfield> // TextField with dense margin for tighter spacing
      <redbar></redbar>
      <textfield label="{'margin="normal"'}" id="margin-normal" margin="normal"></textfield> // TextField with normal margin for standard spacing
      <redbar></redbar>
    </box>
  );
}
</box>

Controlled vs. Uncontrolled Components

In React, components like mui textfield can be either controlled or uncontrolled, which refers to how their state is managed.

• A controlled TextField is managed by state and props within a parent component, offering precise value handling and updates.
• Conversely, an uncontrolled TextField maintains its own internal state, initialized with defaultValue, simplifying setup but offering less direct control over its state.

Implementation with Code:

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';


// StateTextFields Component: Demonstrates the use of controlled and uncontrolled TextField components.
export default function StateTextFields() {
  // State hook for controlling the TextField value
  const [name, setName] = React.useState('Cat in the Hat');


  return (
    // Container for the form elements with specific margin and width styles
    <box component="form" sx="{{"> :not(style)': { m: 1, width: '25ch' } }} // Apply margin and width to each TextField
      noValidate // Disables browser validation
      autoComplete="off" // Turns off auto-completion
    >
      {/* CONTROLLED TEXTFIELD */}
      <textfield id="outlined-controlled" label="Controlled" for the textfield value="{name}" controlled linked to state onchange="{(event)"> {
          setName(event.target.value); // Update state based on input
        }}
      />
      {/* UNCONTROLLED TEXTFIELD */}
      <textfield id="outlined-uncontrolled" label="Uncontrolled" for the textfield defaultvalue="foo" initial value uncontrolled></textfield>
    </textfield></box>
  );
}

Inputs

Material-UI's Input component provides a streamlined way to handle user inputs in forms. It supports various states such as default values, placeholders, disabled inputs, and error handling.

Implementation with Code:

import * as React from 'react';
import Box from '@mui/material/Box';
import Input from '@mui/material/Input';


// Accessibility label configuration for inputs.
const ariaLabel = { 'aria-label': 'description' };


// Inputs Component: Demonstrates various configurations of MUI Input components.
export default function Inputs() {
  return (
    // Form container that applies margin to each input and disables browser validation and autocomplete.
    <box component="form" sx="{{"> :not(style)': { m: 1 } }} // Margin applied to all direct children except <style> elements
      noValidate // Disables HTML form validation.
      autoComplete="off" // Prevents the browser from auto-filling input fields.
    >
      {/* STANDARD INPUT */}
      <Input
        defaultValue="Hello world" // Sets initial value for the input
        inputProps={ariaLabel} // Accessibility properties
      />
      {/* INPUT WITH PLACEHOLDER */}
      <Input
        placeholder="Placeholder" // Displays placeholder text when the input is empty
        inputProps={ariaLabel} // Accessibility properties
      />
      {/* DISABLED INPUT */}
      <Input
        disabled // Disables the input field
        defaultValue="Disabled" // Sets initial value for the input
        inputProps={ariaLabel} // Accessibility properties
      />
      {/* ERROR INPUT */}
      <Input
        defaultValue="Error" // Sets initial value for the input
        error // Indicates an error with a visual cue
        inputProps={ariaLabel} // Accessibility properties
      />
    </style></box>
  );
}

Color

The color prop changes the highlight color of the text field when focused.

Implementation with Code:

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';


// ColorTextFields Component: Demonstrates TextField components styled with various color schemes.
export default function ColorTextFields() {
  return (
    // Form container applying margin and width to each TextField component
    <box component="form" sx="{{"> :not(style)': { m: 1, width: '25ch' } }} // Specifies margin and width for direct children
      noValidate // Disables HTML5 validation
      autoComplete="off" // Disables browser auto-completion
    >
      {/* OUTLINED TEXTFIELD WITH SECONDARY COLOR */}
      <textfield label="Outlined secondary" text for the textfield color="secondary" applies secondary theme focused keeps visually></textfield>
      {/* FILLED TEXTFIELD WITH SUCCESS COLOR */}
      <textfield label="Filled success" text for the textfield variant="filled" uses filled of color="success" applies success theme often green focused keeps visually></textfield>
      {/* STANDARD TEXTFIELD WITH WARNING COLOR */}
      <textfield label="Standard warning" text for the textfield variant="standard" uses standard minimal styling color="warning" applies warning theme often yellow or orange focused keeps visually></textfield>
    </box>
  );
}

Conclusion

Throughout this guide, we've explored the diverse capabilities of the MUI TextField component, covering its variants, styles, colors, and additional functionalities like select options and input adornments.

1. Variants and Styles: We discussed how different TextField variants like standard, filled, and outlined can be utilized to meet specific design needs, enhancing the form's usability and appearance.
2. Functionality Enhancements: By leveraging props such as select and input adornments, TextField can be transformed to accommodate more complex user interactions, such as selecting from dropdowns or adding icons for improved functionality.
3. Form Management: The distinction between controlled and uncontrolled components was highlighted, emphasizing their roles in managing form state and interactions in React applications.
4. Basic Inputs: The simplicity and flexibility of the MUI Input component were showcased, demonstrating how it can handle various input states to streamline user form interactions.

The versatility of MUI components allows developers to build comprehensive, responsive, and accessible user interfaces. For further customization and deeper understanding, refer to the official Material-UI documentation.

위 내용은 MUI TextField: 변형, 색상 및 스타일 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!