web-dev-qa-db-ja.com

MUIThemeProviderを使用せずにmaterial-uiTextFieldコンポーネントのスタイルをオーバーライドするにはどうすればよいですか？

次のコードを使用して、TextFieldコンポーネントwithoutの下線を非表示/削除するにはどうすればよいですか？

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

小道具を使って、ドキュメントに従ってやりたいと思います： https://material-ui.com/api/input/

下線の支柱を変更できるはずですが、機能しません。

reactjsmaterial-uijss
3
Kevin Vugts

これはあなたがそれをする方法です：

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

どうやってそれを理解したのですか？

Inputドキュメント にリンクしました。これには実際にdisableUnderline小道具があります。

ただし、使用しているのは TextField component ：

テキストフィールドは、次のコンポーネントに加えて単純に抽象化されていることを理解することが重要です。

  • FormControl
  • InputLabel
  • 入力
  • FormHelperText

TextFieldで利用可能な小道具のリストを見ると：

InputProps-オブジェクト-Input要素に適用されるプロパティ。

7
thirtydot

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

この問題を修正する方法を見つけました。

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