材质 ui 文本字段不会右对齐和从右到左

Question

我在 react 中使用材料 ui 创建了一个表单，我希望标签从右到左和右对齐我尝试了 textAlign 和 direction:"rtl" 但它们不起作用。这是我的代码：

   <Box style={{textAlign: "right", direction: "rtl"}}>
     <form style={{width: "35ch"}}>
         <Box m={2}  >
                <TextField
                    name={props.id}
                    aria-autocomplete={"list"}
                    autoComplete="true"
                    autofill="true"
                    fullWidth required={props.required}
                    id={props.id} variant="outlined" color={"primary"}
                    label={<Typography style={{display:"inline",fontFamily:"iranyekanreg",direction:"rtl"
                                          ,textAlign:"right"}}>{props.label}</Typography>}
                    inputProps={min:0,step:"1"}
                    type={String}
                    onChange={props.onchange}
                    value={props.value}
                />
        </Box>
      </form>
   </Box>

Answer 1

这应该会给你你想要的。

const useStyles = makeStyles(theme => ({
  labelRoot: {
    right: 0
  },
  shrink: {
    transformOrigin: "top right"
  }
}));

export default function FormPropsTextFields() {
  const classes = useStyles();

  return (
    <div>
      <TextField
        required
        style={{ direction: "rtl" }}
        id="standard-required"
        label="Required"
        defaultValue="Hello World"
        InputLabelProps={{
          classes: { root: classes.labelRoot, shrink: classes.shrink }
        }}
      />
    </div>
  );
}