Question

在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

Answer 1

要获取输入标签，可以使用 InputLabelProps ；要获取输入（下划线等），可以使用 InputProps ；对于辅助文本，可以使用< strong> 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 为组件传递这些样式在 material-ui

中

请从此处引用API：https://material-ui.com/api/text-field/

如何设置Material-UI v1 TextField的样式类似于v0 TextField

1 个答案: