css - 如何自定义material-ui的select?
问题描述
这是预期的结果:
到目前为止,我是这样做的:
我不能做的是把SVG图标放在右边;接下来是文本,这是检查的结果:
此外,当我的光标与元素重叠时,我得到了一条确切的黑线。
这是我的代码:
<MuiThemeProvider theme={createMuiTheme({
overrides: {
MuiSelect: {
'root': { display: 'flex',
alignItems: 'center'
}
},
MuiInput: {
'&:hover': {
borderBottom: '0px',
borderColor: 'transparent'
},
underline: {
'&:after': {
borderBottom: '0px',
borderColor: 'transparent'
},
'&:hover': {
borderBottom: '0px',
borderColor: 'transparent'
}
}
}
}
})}>
<Select
IconComponent={newIcon}
color={'#f1f1f1'}
autoWidth={false}
inputStyle={{
borderBottom: '0px',
color: '#2d2d2d',
fontFamily: 'Lato',
fontWeight: 'bold',
fontSize: '16px',
lineHeight: '19px',
}}
style={{
borderBottom: 'none',
backgroundColor: '#f1f1f1',
padding: '12px',
width: '93px'
}}
value={0}
>
<MenuItem value={0} style={{
color: '#2d2d2d',
fontFamily: 'Lato',
fontWeight: 'bold',
fontSize: '16px',
lineHeight: '19px',
}}>+852</MenuItem>
<MenuItem value={1} style={{
color: '#2d2d2d',
fontFamily: 'Lato',
fontWeight: 'bold',
fontSize: '16px',
lineHeight: '19px'
}}>+86</MenuItem>
</Select>
</MuiThemeProvider>
这是我的图标:
const newIcon = (props) => {
return (
<SvgIcon>
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 45 45">
<path fill="none" fill-rule="evenodd" stroke="#979797" stroke-width="2" d="M17 20l5.467 5.467L27.934 20"/>
</svg>
</SvgIcon>
)
};
您能否就如何正确定位图标以及如何摆脱底线提出建议?谢谢。
解决方案
组件的原生图标在Select
元素上使用以下样式<svg>
:
{ position: 'absolute', right: 0, top: 0, pointerEvents : 'none'}
您只需将上述样式属性应用于MuiSelect.root
覆盖即可获得预期结果。
您在鼠标悬停时观察到的突出显示来自Input
组件,它是组件的根元素Select
。可以使用属性禁用此行为disableUnderline
。
工作示例:
const iconStyle = { position: 'absolute', right: 0, top: 0, pointerEvents : 'none'};
const newIcon = (props) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" style={iconStyle} width="32" height="32" viewBox="0 0 45 45">
<path fill="none" fill-rule="evenodd" stroke="#979797" stroke-width="2" d="M17 20l5.467 5.467L27.934 20"/>
</svg>
)
};
ReactDOM.render(
<Select
IconComponent={newIcon}
disableUnderline
color={'#f1f1f1'}
autoWidth={false}
inputStyle={{
borderBottom: '0px',
color: '#2d2d2d',
fontFamily: 'Lato',
fontWeight: 'bold',
fontSize: '16px',
lineHeight: '19px',
}}
style={{
borderBottom: 'none',
backgroundColor: '#f1f1f1',
padding: '12px',
width: '93px'
}}
value={0}
>
<MenuItem value={0} style={{
color: '#2d2d2d',
fontFamily: 'Lato',
fontWeight: 'bold',
fontSize: '16px',
lineHeight: '19px',
}}>+852</MenuItem>
<MenuItem value={1} style={{
color: '#2d2d2d',
fontFamily: 'Lato',
fontWeight: 'bold',
fontSize: '16px',
lineHeight: '19px'
}}>+86</MenuItem>
</Select>
, document.getElementById('root'));
请参阅StackBlitz上的演示。
推荐阅读
- nasm - nasm:ELF 格式不能产生非 PC 相关的 PLT 引用
- mediawiki - 在 MediaWiki 中替换 ParserSectionCreate Hook
- c - 给定一个 DAG,最长路径的长度和它结束的节点,我如何回溯我的步骤,以便打印最长路径的每个节点?
- javascript - 将新的卡片对象推送到嵌套的对象数组
- java - “项目资源管理器”显示中的 Eclipse / Packages 正在删除主要组件
- postgresql - 如何实现 Escaper 以防止 Postgres 上的 SQL 注入?
- angular - Fullcalendar momentTimezonePlugin 导致错误
- python - 熊猫从与 2 列中的日期索引值匹配的现有值计算新值(新列)
- spring-boot - Apache Kafka Producer 和 Consumer 的 Spring Slueth 实现
- mysql - 如何使用 DataGridView 中的列来影响 MySQL