Key Points:
The direction: "ltr" ensures the label's text aligns properly for left-to-right languages.
The rules such as &.MuiFormLabel-root:not(.MuiFormLabel-filled):not(.Mui-focused) let you target labels in different states.
Make sure you apply ThemeProvider to wrap your app or specific components to apply these styles.
const const theme = createTheme({
components: {
...
MuiInputLabel:{
defaultProps:{},
styleOverrides:{
root:{
direction:"ltr",
width:"100%",
textAlign:"end",
fontSize:20,
"&.MuiFormLabel-root:not(.MuiFormLabel-filled):not(.Muifocused)":{color:'pink'},
"&.Mui-focused":{left:30,top:-10},
"&.MuiFormLabel-filled:not(.Mui-focused)":{left:30, top:-6}
},
},
},
},
)
in component exmple
const OutLineInputWrap = ({
inputType,
label,
textColor,
textColorStateFilled,
textColorStateFocused,
value
,onChangeHndler
}:OutLineInputWrapType)=>{
return (
<FormControl sx={{ m: 1, }} variant="outlined">
<InputLabel
variant='outlined'
sx={{
"&.MuiFormLabel-root:not(.MuiFormLabel-filled):not(.Mui-focused)":{color:textColor},//init
"&.Mui-focused ":{color:textColorStateFocused},
"&.MuiFormLabel-filled:not(.Mui-focused)":{color:textColorStateFilled},
}}
htmlFor={label}>
{label}
</InputLabel>
<OutlinedInput
id={label}
label={label}
type={inputType}
value={value}
onChange={onChangeHndler}
/>
</FormControl>
)
}
export default OutLineInputWrap
type HTMLInputTypes =
| "button"
| "checkbox"
| "color"
| "date"
| "datetime-local"
| "email"
| "file"
| "hidden"
| "image"
| "month"
// | "number" not valid TS see https://stackoverflow.com/questions/61070803/how-to-handle-number-input-in-typescript
| "password"
| "radio"
| "range"
| "reset"
| "search"
| "submit"
| "tel"
| "text"
| "time"
| "url"
| "week";
interface OutLineInputWrapType {
inputType?: HTMLInputTypes
label:string
textColor?:CSSProperties['color']
textColorStateFocused?:CSSProperties['color']
textColorStateFilled?:CSSProperties['color']
value:string
onChangeHndler:ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
}
Key Points:
The direction: "ltr" ensures the label's text aligns properly for left-to-right languages.
The rules such as &.MuiFormLabel-root:not(.MuiFormLabel-filled):not(.Mui-focused) let you target labels in different states.
Make sure you apply ThemeProvider to wrap your app or specific components to apply these styles.
const const theme = createTheme({
components: {
...
MuiInputLabel:{
defaultProps:{},
styleOverrides:{
root:{
direction:"ltr",
width:"100%",
textAlign:"end",
fontSize:20,
"&.MuiFormLabel-root:not(.MuiFormLabel-filled):not(.Muifocused)":{color:'pink'},
"&.Mui-focused":{left:30,top:-10},
"&.MuiFormLabel-filled:not(.Mui-focused)":{left:30, top:-6}
},
},
},
},
)
in component exmple
const OutLineInputWrap = ({
inputType,
label,
textColor,
textColorStateFilled,
textColorStateFocused,
value
,onChangeHndler
}:OutLineInputWrapType)=>{
return (
<FormControl sx={{ m: 1, }} variant="outlined">
<InputLabel
variant='outlined'
sx={{
"&.MuiFormLabel-root:not(.MuiFormLabel-filled):not(.Mui-focused)":{color:textColor},//init
"&.Mui-focused ":{color:textColorStateFocused},
"&.MuiFormLabel-filled:not(.Mui-focused)":{color:textColorStateFilled},
}}
htmlFor={label}>
{label}
</InputLabel>
<OutlinedInput
id={label}
label={label}
type={inputType}
value={value}
onChange={onChangeHndler}
/>
</FormControl>
)
}
export default OutLineInputWrap
type HTMLInputTypes =
| "button"
| "checkbox"
| "color"
| "date"
| "datetime-local"
| "email"
| "file"
| "hidden"
| "image"
| "month"
// | "number" not valid TS see https://stackoverflow.com/questions/61070803/how-to-handle-number-input-in-typescript
| "password"
| "radio"
| "range"
| "reset"
| "search"
| "submit"
| "tel"
| "text"
| "time"
| "url"
| "week";
interface OutLineInputWrapType {
inputType?: HTMLInputTypes
label:string
textColor?:CSSProperties['color']
textColorStateFocused?:CSSProperties['color']
textColorStateFilled?:CSSProperties['color']
value:string
onChangeHndler:ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
}
