/// /** * Input Component - Lynx 版 MUI Input * 100% 一比一复刻 MUI Input * * Input 基于 InputBase,添加了标准下划线样式 * * 对应 MUI: packages/mui-material/src/Input/Input.js */ import './Input.css' import { InputBase, InputBaseProps, inputBaseClasses } from '../InputBase' // ============================================= // 类名定义 // ============================================= export interface InputClasses { root: string formControl: string focused: string disabled: string colorSecondary: string underline: string error: string sizeSmall: string multiline: string fullWidth: string input: string inputSizeSmall: string inputMultiline: string inputTypeSearch: string } export function getInputUtilityClass(slot: string): string { return `MuiInput-${slot}` } export const inputClasses: InputClasses = { root: 'MuiInput-root', formControl: 'MuiInput-formControl', focused: 'Mui-focused', disabled: 'Mui-disabled', colorSecondary: 'MuiInput-colorSecondary', underline: 'MuiInput-underline', error: 'Mui-error', sizeSmall: 'MuiInput-sizeSmall', multiline: 'MuiInput-multiline', fullWidth: 'MuiInput-fullWidth', input: 'MuiInput-input', inputSizeSmall: 'MuiInput-inputSizeSmall', inputMultiline: 'MuiInput-inputMultiline', inputTypeSearch: 'MuiInput-inputTypeSearch', } // ============================================= // 类型定义 // ============================================= export interface InputProps extends InputBaseProps { /** 是否禁用下划线 */ disableUnderline?: boolean } // ============================================= // Input 组件 // ============================================= export function Input(props: InputProps) { const { disableUnderline = false, className, ...other } = props // 构建类名 const rootClasses = [ inputClasses.root, !disableUnderline && inputClasses.underline, className, ].filter(Boolean).join(' ') return ( ) } export default Input