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>

}