Почему iconComponent, используемый с Select, отображается в строке после ввода?

Question

Он должен заменить каретку по умолчанию, но хотя каретка не отображается, моя иконка (с использованием собственного внутреннего компонента, который визуализирует изображение SVG) заканчивается на строке после ввода, перекрываемой текстом подсказки.

Мой код:

  <MuiSelect
    value={value}
    classes={{
      disabled: classes.disabled,
    }}
    IconComponent={() => (
      <Icon name="keyboard_arrow_down" size="small" />
    )}
    input={<TextField optional={optional} label={label} hintText={hintText} />}
    disabled={disabled}
    onChange={props.handleChange}
    {...others}>
    {children}
  </MuiSelect>

Answer 1

Похоже, что переданный значок не имеет того же CSS, к которому применяется значок по умолчанию ...

Я использовал следующее, и, кажется, работает нормально ...

iconStyle: {
    position: 'absolute',
    top: '0',
    right: '0',
    display: 'inline-block',
    color: '#c0c0c0',
    width: '24px',
    height: '24px',
    pointerEvents: 'none'
}

<Select 
  IconComponent={() => <YourSelectIcon className={classes.iconStyle} />}
>
  items here...
</Select>

Answer 2

Оказывается, что некоторые CSS добавлены через класс, добавление того же CSS в мой пользовательский компонент сделало свое дело.