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，然后将相同的CSS添加到我的自定义组件中就可以了。

Answer 2

似乎传入的图标没有应用与默认图标相同的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>

为什么与Select一起使用的iconComponent在输入之后的行上显示？

2 个答案: