reactjs - 如何在不遮挡箭头的情况下在 Select 元素旁边显示图标
问题描述
我正在尝试在此处描述的输入后添加帮助图标。Input 元素看起来不错。我尝试对 Select 元素执行相同的操作,但它搞砸了 Select 的向下箭头,如在此代码框中可以看到的那样
<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>
关于如何实现这一目标的任何想法?
解决方案
查看这个问题线程- 这似乎是一个他们目前不打算修复的已知问题。
但是,您也可以在那里找到建议的这个快速而肮脏的修复,这里是如何将它应用于您在沙箱中提供的示例。
tl; dr:您可以使用以下命令覆盖选择图标样式position: "relative"
:
const useStyles = makeStyles(theme => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120
},
selectEmpty: {
marginTop: theme.spacing(2)
},
selectIcon: {
position: "relative"
}
}))
...
<Select
labelId="demo-simple-select-label"
id="demo-simple-select-adornment"
value={age}
onChange={handleChange}
classes={{
icon: classes.selectIcon //overriding the select-icon style
}}
endAdornment={
<InputAdornment position="end">
<HelpOutline />
</InputAdornment>
}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
推荐阅读
- java - 使用 Open Libraries 创建 PDF/A3 文档
- r - 仅将缺失的信息解释为虚拟变量 R
- oracle - Oracle 19c:所有系统视图都消失了
- react-native - iOS反应原生构建失败
- ios - 在 iOS WKWebView 中保留“Referer”标头?
- amazon-web-services - 使用 AWS 摄取大量数据项(文件或记录)
- javascript - 如何从 ajax post() 返回值?
- asp.net-core - 无法在 Kubernetes 中使用 Dapr Pubsub 块向 RabbitMQ 发布消息
- javascript - Markdown-它不适用于 Nuxt 和内容,抛出错误
- java - 找不到元素“资源”的声明