MUI TextField：构建变体、颜色和样式

mui 文本字段是 Material-UI 中的基本组件，旨在高效、时尚地捕获用户输入。本指南探讨了其构建变体、通过颜色和样式进行的广泛自定义以及提升应用程序 UI/UX 的实际用例。

MUI 文本字段简介

mui 文本字段为 Web 应用程序中的用户输入提供了高度适应性的界面组件，支持一系列样式、配置和用户交互。无论您是收集简单的文本输入、密码还是更复杂的多行条目，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：暂时禁用输入字段，使其不可交互。这在需要满足某些条件才能接受用户输入的情况下非常有用。
• type：定义文本字段中预期的数据类型，例如文本、密码或数字。这有助于正确构建表单数据并确保用户输入符合所需的格式。
• 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中文网其他相关文章！