MUI TextField：建立變體、顏色和樣式
- WBOY原創
- 2024-09-10 11:06:511118瀏覽
mui 文字欄位是 Material-UI 中的基本元件，旨在高效、時尚地擷取使用者輸入。本指南探討了其建置變體、透過顏色和樣式進行的廣泛自訂以及提升應用程式 UI/UX 的實際用例。
MUI 文字欄位簡介
mui 文字欄位為 Web 應用程式中的使用者輸入提供了高度適應性的介面元件，支援一系列樣式、配置和使用者互動。無論您是收集簡單的文字輸入、密碼還是更複雜的多行條目，mui 文字欄位都可以透過強大的自訂選項靈活地滿足這些需求。
基本文字字段
Material-UI 為基本 mui 文字欄位提供了三種不同的建置變體，每種變體都針對不同的 UI 偏好和使用者體驗進行了客製化：
- 標準： 提供極簡主義方法，下劃線在焦點上變得突出。非常適合介面整潔、現代的設計。
- 填充：此變體引入了淺色背景填充和僅在字段處於活動狀態時才出現的下劃線，增加了微妙的深度和強調感。
- 概述： 文字欄位周圍有完整邊框，增強了不同背景下的可見性，並為互動元素提供了清晰的界限。
使用程式碼實作：
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>
);
}
表格道具
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: 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>
);
}
多行文字字段
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: 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>
);
}
選擇
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: 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.
- 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.
- 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.
- Form Management: The distinction between controlled and uncontrolled components was highlighted, emphasizing their roles in managing form state and interactions in React applications.
- 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中文網其他相關文章！
css less for select format include require Error using internal Length Interface Attribute number default this margin border background input ux ui
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn