我试图添加一个帮助图标后所描述的输入here。对于Input元素,它看起来很好。我尝试对Select元素做同样的操作,但是它把Select的向下箭头搞砸了,如在this codesandbox中所见
<Select
labelId="demo-simple-select-label"
id="demo-simple-select-adornment"
value={age}
onChange={handleChange}
endAdornment={
<InputAdornment position="end">
<HelpOutline />
</InputAdornment>
}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
如何实现这一点有什么想法吗?
1条答案
按热度按时间ajsxfq5m1#
看看这个issue thread-这似乎是一个已知的问题,他们目前不打算修复。
但是,您也可以在那里找到这个快速而肮脏的修复建议,以及here is how it can be applied to the example you provided in the sandbox。
tl;dr:可以用
position: "relative"
覆盖select-icon样式: