MUI RTl input fields with labels
<Box component="form" sx={{ mt: 4 }}> <TextField dir="rtl" sx={{ mb: 2, "& .MuiFormLabel-root": { color: "#655F7B", left: "auto", right: "30px", }, "& .MuiFormLabel-root[data-shrink='true']": { left: "0", right: "auto", }, }} label="שם" name="name" fullWidth /> <TextField dir="rtl" sx={{ mb: 2, "& .MuiFormLabel-root": { color: "#655F7B", left: "auto", right: "30px", }, "& .MuiFormLabel-root[data-shrink='true']": { left: "0", right: "auto", }, }} label="אימייל" name="email" type="email" fullWidth /> <TextField dir="rtl" sx={{ mb: 2, "& .MuiFormLabel-root": { color: "#655F7B", left: "auto", right: "30px", }, "& .MuiFormLabel-root[data-shrink='true']": { left: "0", right: "auto", }, }} label="נושא" name="mobile" type="tel" fullWidth /> <TextField dir="rtl" sx={{ mb: 2, "& .MuiFormLabel-root": { color: "#655F7B", left: "auto", right: "30px", }, "& .MuiFormLabel-root[data-shrink='true']": { left: "0", right: "auto", }, }} label="הזינו כאן את ההודעה" name="message" multiline rows={4} fullWidth /> <Button type="submit" variant="contained" color="black"> Submit Now </Button> </Box>