Как оформить TextField для Material-UI v1 аналогично TextField v0 - PullRequest
Новая
       9

Как оформить TextField для Material-UI v1 аналогично TextField v0

0 голосов
/ 06 июля 2018

В Material-UI v0 TextField может правильно стилизоваться с заданными атрибутами.
Точно так же; 

<TextField
     floatingLabelText="New Password"
     fullWidth={true}
     underlineStyle={styles.dialogInputUnderlineStyle}
     underlineFocusStyle={styles.dialogInputUnderlineFocusStyle}
     errorStyle={styles.dialogInputErrorStyle}
     floatingLabelFocusStyle={styles.dialogInputLabelFocus}
     floatingLabelStyle={styles.dialogInputLabel}
     inputStyle={styles.dialogInputStyle}
     style={styles.rootStyle}
     hintText="Must be atleast 8 characters long"
     hintStyle={styles.dialogInputHintStyle}
     type="password"
     />

Как использовать атрибуты стиля ниже в Material-Ui v1? 

   underlineStyle,
   underlineFocusStyle,
   errorStyle,
   floatingLabelFocusStyle,
   floatingLabelStyle.
   inputStyle,
   hintStyle

1 Ответ

0 голосов
/ 06 июля 2018

Для доступа к метке ввода вы можете использовать InputLabelProps , а для ввода (подчеркивание и т. Д.) Вы можете использовать InputProps , а для вспомогательного текста вы можете использовать FormHelperTextProps .

вот пример: 

  <TextField
    defaultValue="react-bootstrap"
    label="Bootstrap"
    id="bootstrap-input"
    InputProps={{
      disableUnderline: true,
      classes: {
        root: classes.root,
        input: classes.input,
      },
    }}
    InputLabelProps={{
      shrink: true,
      className: classes.label,
    }}
    FormHelperTextProps={{
      classes:{
        root: classes.yourCSS,
        error: classes.yourErrorCSS
      }
    }}
  />

здесь вы должны передать эти стили для компонента, используя WithStyles в материал-интерфейс

см. API здесь: https://material -ui.com / api / text-field /

...