如何在不使用MUIThemeProvider的情况下覆盖material-ui TextField组件的样式? [英] How to override styles for material-ui TextField component without using the MUIThemeProvider?

问题描述

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

How would I hide / remove the underline in a TextField component without using the following code:

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

根据文档，我想使用道具: https://material- ui.com/api/input/

I would like to do it with props and according to the docs: https://material-ui.com/api/input/

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

I should be able to change the underline prop, but it does not work.

推荐答案

这是您的操作方式:

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

我怎么知道的?

您已链接到 Input文档，该文档确实具有道具.

You have linked to the Input documentation, which does indeed have a disableUnderline prop.

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

However, you are using a TextField component:

重要的是要了解文本字段是一个简单的 以下组件之上的抽象:

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

• FormControl
• InputLabel
• 输入
• FormHelperText

• FormControl
• InputLabel
• Input
• FormHelperText

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

If you look at the list of available props for TextField:

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

InputProps - object - Properties applied to the Input element.

这篇关于如何在不使用MUIThemeProvider的情况下覆盖material-ui TextField组件的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！