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

重要的是要理解文本字段是基于以下组件的简单抽象:

• FormControl
• InputLabel
• 输入
• FormHelperText

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

InputProps - object - 应用于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'],
    },
  },
})