首页 文章

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

提问于
浏览 次
0

在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
reactjs material-ui

1 回答

  • 1

    要访问输入标签，您可以使用 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 在 material-ui 中为组件传递这些样式

    请从这里参考API：https://material-ui.com/api/text-field/

    回复于

相关问题