материал пользовательский интерфейс следующее текстовое поле подчеркивание цвет - PullRequest
Новая
       8

материал пользовательский интерфейс следующее текстовое поле подчеркивание цвет

0 голосов
/ 18 мая 2018

Существует ответ, который работал для последней версии: Material UI следующий диалог Текстовое поле Подчеркнутый цвет

Поскольку версия 1 Material UI вышла, эта конфигурация не работает для менябольше.Часть при наведении больше не действует: 

'&:hover:not($disabled):before': { //underline color when hovered 
    backgroundColor: 'green',
},

Кто-нибудь уже понял, как это сделать сейчас?

1 Ответ

0 голосов
/ 08 августа 2018

В моем проекте (я использую @ material-ui / core: "1.4.3"), и я нашел это решение для решения этой проблемы.

1) Сначала импортируйте MuiThemeProvider & createMuiThemeна вашем компоненте: 

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

2) Затем добавьте следующие строки кода после импорта: 

const theme = createMuiTheme({
  // For Underline Color After Click
  palette: {
    primary: { main: "#00BCD6"},
  },
  // For Underline Hover Color
  overrides: {
    MuiInput: {
      underline: {
        '&:hover:not($disabled):not($error):not($focused):before': {
          borderBottom: '1px solid rgba(0, 0, 0, 0.42)',
        },
      },
    }
  }
});

3) И на последнем этапе оберните ваш компонент, который вы хотите редактироватьс этим кодом: 

<MuiThemeProvider theme={theme}>

// Your Component here

</MuiThemeProvider>

Надеюсь, это поможет вам!:)

...