MUI TextField: Varianten, Farben und Stile erstellen

Das Mui-Textfeld ist eine grundlegende Komponente in Material-UI und wurde entwickelt, um Benutzereingaben effizient und stilvoll zu erfassen. In diesem Leitfaden werden die Build-Varianten, umfangreiche Anpassungsmöglichkeiten durch Farben und Stile sowie praktische Anwendungsfälle erläutert, um die Benutzeroberfläche/UX Ihrer Anwendung zu verbessern.

Einführung in MUI TextField

Das Mui-Textfeld bietet eine äußerst anpassungsfähige Schnittstellenkomponente für Benutzereingaben in Webanwendungen und unterstützt eine Reihe von Stilen, Konfigurationen und Benutzerinteraktionen. Unabhängig davon, ob Sie einfache Texteingaben, Passwörter oder komplexere mehrzeilige Einträge sammeln, bietet mui textfield die Flexibilität, diese Anforderungen mit robusten Anpassungsoptionen zu erfüllen.

Grundlegendes TextFeld

Material-UI bietet drei verschiedene Build-Varianten für das grundlegende Mui-Textfeld, die jeweils auf unterschiedliche UI-Präferenzen und Benutzererfahrungen zugeschnitten sind:

1. Standard: Bietet einen minimalistischen Ansatz mit einer Unterstreichung, die den Fokus hervorhebt. Ideal für klare, moderne Designs, bei denen die Benutzeroberfläche nicht überladen ist.
2. Gefüllt: Diese Variante führt eine helle Hintergrundfüllung und eine Unterstreichung ein, die nur angezeigt wird, wenn das Feld aktiv ist, und verleiht so einen subtilen Hauch von Tiefe und Betonung.
3. Umrissen: Verfügt über einen vollständigen Rand um das Textfeld, der die Sichtbarkeit auf verschiedenen Hintergründen verbessert und eine klare Abgrenzung für interaktive Elemente bietet.

Implementierung mit Code:

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" />


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


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

Form-Requisiten

Das Mui-Textfeld ist für die Verarbeitung einer Vielzahl von Standardformularattributen ausgestattet, die die Funktionalität und Benutzerinteraktion verbessern. Zu diesen Attributen gehören Optionen wie „erforderlich“, „deaktiviert“ und „Typ“, die für die Steuerung von Benutzereingaben und die Aufrechterhaltung der Formularintegrität unerlässlich sind. Darüber hinaus ist die helperText-Requisite besonders nützlich, um Kontext zur Eingabe eines Felds bereitzustellen, seinen Nutzen zu erläutern oder Hinweise zum erwarteten Format zu geben.

Im Folgenden sind die wichtigsten Formular-Requisiten aufgeführt:

• erforderlich: Markiert das Feld als erforderlich und fordert Benutzer auf, es auszufüllen, bevor sie ein Formular absenden. Dies ist entscheidend, um sicherzustellen, dass alle wesentlichen Informationen erfasst werden.
• deaktiviert: Deaktiviert das Eingabefeld vorübergehend, sodass es nicht interaktiv ist. Dies ist in Szenarien nützlich, in denen bestimmte Bedingungen erfüllt sein müssen, bevor Benutzereingaben akzeptiert werden können.
• Typ: Definiert den Typ der im Textfeld erwarteten Daten, z. B. Text, Passwort oder Zahl. Dies hilft bei der korrekten Strukturierung der Formulardaten und stellt sicher, dass die Benutzereingabe dem erforderlichen Format entspricht.
• helperText: Stellt zusätzliche Details oder Anweisungen zum Eingabefeld bereit. Dies kann verwendet werden, um den Zweck der Daten zu klären oder Benutzer beim korrekten Ausfüllen des Formulars anzuleiten.

Implementierung mit Code:

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: 1, width: '25ch' } }}
      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
          disabled
          id="outlined-disabled"
          label="Disabled"
          defaultValue="Hello World" // Pre-filled text, non-interactive
        />
        <TextField
          id="outlined-password-input"
          label="Password"
          type="password" // Hides the text input
          autoComplete="current-password"
        />
        <TextField
          id="outlined-read-only-input"
          label="Read Only"
          defaultValue="Hello World"
          slotProps={{ input: { readOnly: true } }} // Non-editable input
        />
        <TextField
          id="outlined-number"
          label="Number"
          type="number" // Numeric input
          slotProps={{ inputLabel: { shrink: true } }} // Label configuration
        />
        <TextField
          id="outlined-search"
          label="Search field"
          type="search" // Optimized for search input
        />
        <TextField
          id="outlined-helperText"
          label="Helper text"
          defaultValue="Default Value"
          helperText="Some important text" // Additional information for the user
        />
      </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
          disabled
          id="filled-disabled"
          label="Disabled"
          defaultValue="Hello World"
          variant="filled"
        />
        // 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
          disabled
          id="standard-disabled"
          label="Disabled"
          defaultValue="Hello World"
          variant="standard"
        />
        // Remaining Standard TextFields omitted for brevity
      </div>
    </Box>
  );
}

Mehrzeilige Textfelder

Die mehrzeilige Requisite im Mui-Textfeld ist eine leistungsstarke Funktion, die das Standardtextfeld in ein TextareaAutosize-Element umwandelt und es somit ideal für Eingaben macht, die längere Texteingaben erfordern, wie Kommentare, Beschreibungen oder Feedbackformulare. Diese Funktion ist besonders nützlich in Formularen, in denen Benutzer detaillierte Informationen bereitstellen müssen, die über eine einzige Textzeile hinausgehen.

Für Szenarien, in denen Sie mehr Kontrolle über die Größe des Textfelds benötigen, können Sie die Requisiten minRows und maxRows verwenden, um minimale und maximale Grenzen für seine Höhe festzulegen. Dies ist besonders nützlich, wenn Sie eine bestimmte Layoutästhetik beibehalten möchten oder wenn Sie mit Formulareingaben arbeiten, von denen erwartet wird, dass sie innerhalb bestimmter Längenbeschränkungen liegen.

Implementierung mit Code:

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: 1, width: '25ch' } }}
      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 4
        />
        <TextField
          id="outlined-textarea"
          label="Multiline Placeholder"
          placeholder="Placeholder" // Placeholder text for empty field
          multiline
        />
        <TextField
          id="outlined-multiline-static"
          label="Multiline"
          multiline
          rows={4} // Fixed number of rows
          defaultValue="Default Value" // Pre-filled text
        />
      </div>


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


      {/* STANDARD TEXTFIELDS GROUP */}
      <div>
        <TextField
          id="standard-multiline-flexible"
          label="Multiline"
          multiline
          maxRows={4}
          variant="standard" // Standard style variant
        />
        <TextField
          id="standard-textarea"
          label="Multiline Placeholder"
          placeholder="Placeholder"
          multiline
          variant="standard"
        />
        <TextField
          id="standard-multiline-static"
          label="Multiline"
          multiline
          rows={4}
          defaultValue="Default Value"
          variant="standard"
        />
      </div>
    </Box>
  );
}

Wählen

Die Select-Requisite im Mui-Textfeld verwandelt das Standardtextfeld in ein Dropdown-Menü, indem sie die Select-Komponente intern integriert. Diese Änderung ermöglicht eine nahtlose Auswahl zwischen vordefinierten Optionen, was sie besonders nützlich in Formularen macht, in denen Benutzer aus einer festgelegten Liste auswählen müssen.

Implementierung mit Code:

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: 1, width: '25ch' } }}
      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 select 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 variant
          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 variant
          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: 'flex', flexWrap: 'wrap' }}>
      {/* OUTLINED VARIANT GROUP */}
      <div>
        <TextField
          label="With normal TextField"
          id="outlined-start-adornment"
          sx={{ m: 1, width: '25ch' }}
          InputProps={{
            startAdornment: <InputAdornment position="start">kg</InputAdornment>,
          }}
        />
        <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
          <OutlinedInput
            id="outlined-adornment-weight"
            endAdornment={<InputAdornment position="end">kg</InputAdornment>}
            aria-describedby="outlined-weight-helper-text"
          />
          <FormHelperText id="outlined-weight-helper-text">Weight</FormHelperText>
        </FormControl>
        <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
          <InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
          <OutlinedInput
            id="outlined-adornment-password"
            type={showPassword ? 'text' : 'password'}
            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  aria-label="toggle password visibility"
                  onClick={handleClickShowPassword}
                  onMouseDown={handleMouseDownPassword}
                  onMouseUp={handleMouseUpPassword}
                  edge="end"
                >
                  {showPassword ? <VisibilityOff /> : <Visibility />}
                </IconButton>
              </InputAdornment>
            }
            label="Password"
          />
        </FormControl>
        <FormControl fullWidth sx={{ m: 1 }}>
          <InputLabel htmlFor="outlined-adornment-amount">Amount</InputLabel>
          <OutlinedInput
            id="outlined-adornment-amount"
            startAdornment={<InputAdornment position="start">$</InputAdornment>}
            label="Amount"
          />
        </FormControl>
      </div>
      {/* FILLED VARIANT GROUP */}
      <div>
        <TextField
          label="With normal TextField"
          id="filled-start-adornment"
          sx={{ m: 1, width: '25ch' }}
          InputProps={{
            startAdornment: <InputAdornment position="start">kg</InputAdornment>,
          }}
          variant="filled"
        />
        <FormControl sx={{ m: 1, width: '25ch' }} variant="filled">
          <FilledInput
            id="filled-adornment-weight"
            endAdornment={<InputAdornment position="end">kg</InputAdornment>}
            aria-describedby="filled-weight-helper-text"
          />
          <FormHelperText id="filled-weight-helper-text">Weight</FormHelperText>
        </FormControl>
        <FormControl sx={{ m: 1, width: '25ch' }} variant="filled">
          <InputLabel htmlFor="filled-adornment-password">Password</InputLabel>
          <FilledInput
            id="filled-adornment-password"
            type={showPassword ? 'text' : 'password'}
            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  aria-label="toggle password visibility"
                  onClick={handleClickShowPassword}
                  onMouseDown={handleMouseDownPassword}
                  onMouseUp={handleMouseUpPassword}
                  edge="end"
                >
                  {showPassword ? <VisibilityOff /> : <Visibility />}
                </IconButton>
              </InputAdornment>
            }
          />
        </FormControl>
        <FormControl fullWidth sx={{ m: 1 }} variant="filled">
          <InputLabel htmlFor="filled-adornment-amount">Amount</InputLabel>
          <FilledInput
            id="filled-adornment-amount"
            startAdornment={<InputAdornment position="start">$</InputAdornment>}
          />
        </FormControl>
      </div>
      {/* STANDARD VARIANT GROUP */}
      <div>
        <TextField
          label="With normal TextField"
          id="standard-start-adornment"
          sx={{ m: 1, width: '25ch' }}
          InputProps={{
            startAdornment: <InputAdornment position="start">kg</InputAdornment>,
          }}
          variant="standard"
        />
        <FormControl variant="standard" sx={{ m: 1, mt: 3, width: '25ch' }}>
          <Input
            id="standard-adornment-weight"
            endAdornment={<InputAdornment position="end">kg</InputAdornment>}
            aria-describedby="standard-weight-helper-text"
          />
          <FormHelperText id="standard-weight-helper-text">Weight</FormHelperText>
        </FormControl>
        <FormControl sx={{ m: 1, width: '25ch' }} variant="standard">

         <Input
        id="standard-adornment-password"
        type={showPassword ? 'text' : 'password'}
        endAdornment={
          <InputAdornment position="end">
            <IconButton
              aria-label="toggle password visibility"
              onClick={handleClickShowPassword}
              onMouseDown={handleMouseDownPassword}
              onMouseUp={handleMouseUpPassword}
            >
              {showPassword ? <VisibilityOff /> : <Visibility />}
            </IconButton>
          </InputAdornment>
        }
      />
    </FormControl>
    <FormControl fullWidth sx={{ m: 1 }} variant="standard">
      <InputLabel htmlFor="standard-adornment-amount">Amount</InputLabel>
      <Input
        id="standard-adornment-amount"
        startAdornment={<InputAdornment position="start">$</InputAdornment>}
      />
    </FormControl>
  </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: 'flex', // Flexbox container for layout
        flexDirection: 'column', // Arranges children vertically
        '& .MuiTextField-root': { width: '25ch' }, // Standard width applied to all TextFields
      }}
    >
      <RedBar />
      <TextField label={'margin="none"'} id="margin-none" /> // TextField with no margin
      <RedBar />
      <TextField label={'margin="dense"'} id="margin-dense" margin="dense" /> // TextField with dense margin for tighter spacing
      <RedBar />
      <TextField label={'margin="normal"'} id="margin-normal" margin="normal" /> // TextField with normal margin for standard spacing
      <RedBar />
    </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" // Label for the TextField
        value={name} // Controlled value linked to state
        onChange={(event) => {
          setName(event.target.value); // Update state based on input
        }}
      />
      {/* UNCONTROLLED TEXTFIELD */}
      <TextField
        id="outlined-uncontrolled"
        label="Uncontrolled" // Label for the TextField
        defaultValue="foo" // Initial value for the uncontrolled 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
      />
    </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" // Label text for the TextField
        color="secondary" // Applies the secondary color theme
        focused // Keeps the TextField visually focused
      />
      {/* FILLED TEXTFIELD WITH SUCCESS COLOR */}
      <TextField
        label="Filled success" // Label text for the TextField
        variant="filled" // Uses the filled variant of the TextField
        color="success" // Applies the success color theme, often green
        focused // Keeps the TextField visually focused
      />
      {/* STANDARD TEXTFIELD WITH WARNING COLOR */}
      <TextField
        label="Standard warning" // Label text for the TextField
        variant="standard" // Uses the standard variant, minimal styling
        color="warning" // Applies the warning color theme, often yellow or orange
        focused // Keeps the TextField visually focused
      />
    </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.

Das obige ist der detaillierte Inhalt vonMUI TextField: Varianten, Farben und Stile erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!