材质用户界面选择和自动完成框未对齐

Question

Screenshot of misaligned drop-down boxes

嗨！我是ReactJS的初学者。我在Material UI中添加了2个下拉框，左边的框是materialui / labs的“自动完成”，右边的框是“ materialui / core中的选择”。它们都放置在具有相同样式的相同组件中，但是“自动完成”功能略有不足。是否可以解决这种未对准问题？

          <AutocompleteComponent
            formStyle={{ width: 200 }}
            label={'Build'}
            options={builds}
            value={selectedBuild}
            handleChange={handleFilterSelectChange('selectedBuild')} />
          <SelectComponent
            formStyle={{ width: 120 }}
            label={'Sheet Layout'}
            options={sheetLayouts}
            value={selectedSheetLayout}
            handleChange={handleFilterSelectChange('selectedSheetLayout')} />

对于选择的组件：

const SelectComponent = props => {

return (
    <FormControl
      className={className}
      required={required}
      error={error}
      margin={margin}
      style={formStyle}
    >
      <InputLabel>{label}</InputLabel>
      <Select
        inputRef={inputRef}
        value={value}
        style={style}
        onChange={handleChange}
        disabled={disabled}
        onClick={onClick}
        onFocus={onFocus}
        onBlur={onBlur}
      >
        {excludeNone ? null : (
          <MenuItem value="">
            <em>{noneLabel ? noneLabel : "None"}</em>
          </MenuItem>
        )}
        {optionsExist(options)}
      </Select>
      {helperText ? <FormHelperText>{helperText}</FormHelperText> : null}
    </FormControl>
  );
};

对于自动填充组件：

class AutocompleteComponent extends React.Component {
render() {
return (
      <FormControl
        className={className}
        required={required}
        error={error}
        margin={margin}
        style={formStyle}
      >
        <Autocomplete
          style={style}
          disabled={disabled}
          onClick={onClick}
          onFocus={onFocus}
          onBlur={onBlur}
          options={options}
          getOptionLabel= {option => option.label && option.label.toString()}
          id="auto-complete"
          autoComplete
          includeInputInList
          renderInput={params => (
            <TextField
              {...params}
              label="Builds"
              margin="normal"
              fullWidth
              position="center"
            />
          )}
          renderOption={(option, { inputValue }) => {
            const matches = match(option.label, inputValue);
            const parts = parse(option.label, matches);

            return (
              <div>
                {parts.map((part, index) => (
                  <span
                    key={index}
                    style={{ fontWeight: part.highlight ? 700 : 400 }}
                  >
                    {part.text}
                  </span>
                ))}
              </div>
            );
          }}
        />
        {helperText ? <FormHelperText>{helperText}</FormHelperText> : null}
      </FormControl>
    );
  }
}

谢谢！