reactjs - material ui: how to align the Input Label properly

Question

I have the following code for input with inputlable

<FormControl>
  <InputLabel htmlFor="my-input">
    Photo
  </InputLabel>
  <input
    type="file"
  />
</FormControl>

What I see is

What I want is

I get this using:

<TextField
  fullWidth
  label="photo"
  margin="dense"
  accept="image/*"
  type="file"
  InputLabelProps={{
    shrink: true,
  }}
/>

So how can get this same effect using the previous code i.e using formcontrol, inputlable etc.

The reason i have to use that intead of textfield is react hook form: materail ui: Textfield: onSubmit, not passing Filelist in the data

标签： reactjsmaterial-ui

Answer 1

只需设置trueshrink属性InputLabel并添加自定义margin：

  <FormControl>
    <InputLabel shrink={true} htmlFor="my-input">
      Photo
    </InputLabel>
    <input style={{ marginTop: "15px" }} type="file" />
  </FormControl>