如何在不使用 MUIThemeProvider 的情况下覆盖 material-ui TextField 组件的样式?

Question

如何在不使用以下代码的情况下隐藏/删除 TextField 组件中的下划线：

const theme = createMuiTheme({
overrides: {
MuiInput: {
underline: {
'&:hover:not($disabled):before': {
backgroundColor: 'rgba(0, 188, 212, 0.7)',
},
},
},
},
});

我想用道具和根据文档来做：https://material-ui.com/api/input/

我应该能够更改下划线道具，但它不起作用。

Answer 1

这是你这样做的方式：

<TextField
id="name"
label="Name"
value={this.state.name}
margin="normal"
InputProps={{disableUnderline: true}}
/>

我是怎么想出来的？

您已经链接到Input文档，该文档确实具有disableUnderline道具。

但是，您使用的是TextField组件：

请务必了解文本字段是一个简单的 在以下组件之上进行抽象：

• 表单控件
• 输入标签
• 输入
• 表单帮助程序文本

如果您查看TextField的可用道具列表：

输入道具 - 对象 - 应用于输入元素的属性。

Answer 2

使用最新版本的 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'],
},
},
})

Answer 3

我找到了解决此问题的方法。

<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)',
}
}
})

Answer 4

解决这个问题略有不同，但与接受的答案相同，因为我在尝试在组件本身上使用disableUnderline时遇到了打字稿错误。

import { createTheme } from '@mui/material/styles'
export const componentTheme = createTheme({
components: {
MuiTextField: {
defaultProps: {
InputProps: {
disableUnderline: true,
},
},
},
},
}