材质 UI 表单输入元素 - 带有 formHelper 和 endAdornment 的全宽

Question

我正在尝试弄清楚如何使用 Material UI 表单输入元素。

我正在尝试将此输入用作全宽项目，它同时使用表单助手和 endAdornment。

我已经尝试过 Input 和 InputBase 选项，但每个选项似乎都限制了这种组合。

这个code sandbox 显示了使用输入组件的宽度问题。目前，宽度容器设置为 fullWidth，根类将其定义为 90% - 但表单输入被压缩为小尺寸 - 我看不到强制执行此操作的属性。

当我尝试使用 InputBase 时，我可以有全宽，但我不能使用表单输入下方的表单助手（它被推到同一行并出现在 InfoIcon 之后）。

Answer 1

那是因为输入占据了它的父容器的整个宽度，在这种情况下是FormControl，所以你必须使FormControl更宽才能达到你想要的效果。例如，您可以向FormControl 添加一个类并设置它的样式，使其跨越容器的整个宽度（参见下面的代码）。你可以看到它在here 工作。

const useStyles = makeStyles(theme => ({
  root: {
    padding: "2px 4px",
    // display: 'flex',
    alignItems: "center",
    width: "90%",
    margin: "auto"
  },
  input: {
    marginLeft: theme.spacing(1),
    flex: 1
  },
  iconButton: {
    padding: 10
  },
  divider: {
    height: 28,
    margin: 4
  },
  formControl: {
    width: "90%"
  }
}));

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

  return (
    <div>
      <div style={{ marginLeft: "3vw" }} />
      <Paper component="form" className={classes.root} elevation={0}>
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="component-helper">Title</InputLabel>
          <Input
            id="component-helper"
            placeholder={"name"}
            fullWidth={true}
            onChange={"handleChange"}
            aria-describedby="component-helper-text"
            endAdornment={
              <InputAdornment position="end">
                <Divider className={classes.divider} orientation="vertical" />
                <IconButton
                  color="primary"
                  className={classes.iconButton}
                  aria-label="directions"
                >
                  <InfoIcon />
                </IconButton>
              </InputAdornment>
            }
          />
          <FormHelperText id="component-helper-text">
            <a href="link.com" className="bodylinks" style={{ float: "right" }}>
              Test link in helper
            </a>
          </FormHelperText>
        </FormControl>
      </Paper>
    </div>
  );
}