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

Question

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

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

我想用 Prop 并根据文档来做到这一点:https://material-ui.com/api/input/

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

Answer 1

这就是你的做法:

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

我是怎么想出来的？

您已链接到 Input documentation ，它确实有一个 disableUnderline 属性。

但是，您正在使用 TextField component :

It's important to understand that the text field is a simple abstraction on top of the following components:

• FormControl
• InputLabel
• Input
• FormHelperText

如果您查看 TextField 的可用属性列表:

InputProps - object - Properties applied to the Input element.