reactjs - 如何在不使用 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组件：

重要的是要理解文本字段是对以下组件的简单抽象：

• 表单控件
• 输入标签
• 输入
• FormHelperText

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

InputProps - 对象 - 应用于 Input 元素的属性。

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