如何在 MUI 文本字段中将标签居中

Question

我想将标签和帮助文本居中在文本字段的中间。 我通过向 MuiInputLabel-root 添加填充来实现它。 但这对其他屏幕尺寸没有响应（文本字段更改尺寸并且标签不再位于中心）。 我试过使用textAlign: 'center'但它不起作用。

1. 目前我有左侧标签的文本字段：当前

2. 我也想将标签和最终帮助文本居中：预期

3. 当前当焦点 paddingLeft 再次设置为 0 时： Focused

 const StyledTextField = styled(TextField)({ '& .MuiInputLabel-root': { paddingLeft: '85px', }, '& label.Mui-focused': { color: '#000000', paddingLeft: '0px', }, <StyledTextField helperText="Privacy Policy " InputProps={{ inputProps: { style: { textAlign: 'center' }, }, }} margin="normal" fullWidth id="email" label="Email Address" name="email" autoComplete="email" autoFocus sx={{ m: 1, }} />

Answer 1

这是我能够解决您的问题的方法（更新的代码）。

const StyledTextField = styled(TextField)({
  "& .MuiInputLabel-root": {
    right: 0,
    textAlign: "center"
  },
  "& .MuiInputLabel-shrink": {
    margin: "0 auto",
    position: "absolute",
    right: "0",
    left: "0",
    top: "-3px",
    width: "150px", // Need to give it a width so the positioning will work
    background: "white" // Add a white background as below we remove the legend that had the background so text is not meshing with the border
    // display: "none" //if you want to hide it completly
  },
  "& .MuiOutlinedInput-root.Mui-focused": {
    "& legend ": {
      display: "none"
    }
  }
});

export default function BasicTextFields() {
  return (
    <StyledTextField
      helperText="Privacy Policy "
      InputProps={{
        inputProps: {
          style: { textAlign: "center" }
        }
      }}
      margin="normal"
      fullWidth
      id="email"
      label="Email Address"
      name="email"
      autoComplete="email"
      autoFocus
    />
  );
}

这是尝试使用的更新代码框。 让我知道你的想法。