Как переопределить стили для компонента TextField для пользовательского интерфейса без использования MUIThemeProvider?

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 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 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
    id="name"
    label="Name"
    value={this.state.name}
    margin="normal"
    InputProps={{disableUnderline: true}}
/>

Как я это выяснил?

Вы связались с Input документацией , которая делаетдействительно имеет disableUnderline проп.

Однако вы используете TextField компонент :

Важно понимать, что текстовое поле являетсяпростая абстракция поверх следующих компонентов:

• FormControl
• InputLabel
• Input
• FormHelperText

Если посмотреть список доступных реквизитов для TextField:

InputProps - object - свойства, примененные к элементу Input.