如何在不使用以下代码的情况下隐藏/删除 TextField 组件中的下划线：
const theme = createMuiTheme({
overrides: {
MuiInput: {
underline: {
'&:hover:not($disabled):before': {
backgroundColor: 'rgba(0, 188, 212, 0.7)',
},
},
},
},
});
我想使用props并根据文档进行操作：https : //material-ui.com/api/input/
我应该能够更改下划线props，但它不起作用。
这是你如何做到的：
<TextField
id="name"
label="Name"
value={this.state.name}
margin="normal"
InputProps={{disableUnderline: true}}
/>
我是怎么想出来的？
您已链接到Input文档，该文档确实有一个disableUnderlineprops。
但是，您正在使用一个TextField组件：
重要的是要了解文本字段是以下组件之上的简单抽象：
- 表单控件
- 输入标签
- 输入
- 表单助手文本
如果您查看以下可用props列表TextField：
InputProps - 对象 - 应用于 Input 元素的属性。
使用最新版本的 Material-UI，这是我完成这项工作的唯一方法：
<TextField InputProps={{classes: {underline: classes.underline}}} />
const styles = theme => ({
underline: {
'&:before': {
borderBottomColor: colors.white,
},
'&:after': {
borderBottomColor: colors.white,
},
'&:hover:before': {
borderBottomColor: [colors.white, '!important'],
},
},
})
我找到了解决这个问题的方法..
<TextField InputProps={{classes: {underline: classes.underline}}} />
const styles = theme => ({
underline: {
'&:hover': {
'&:before': {
borderBottom: ['rgba(0, 188, 212, 0.7)', '!important'],
}
},
'&:before': {
borderBottom: 'rgba(0, 188, 212, 0.7)',
}
}
})