Css 材料界面：显示标签宽度为0的文本字段

我想显示这样一个字段

但即使字段处于焦点位置，边界仍保持完整，不会被标签切割

我正在使用材质UI文本字段

您希望：

隐藏标签当您输入一个值只是为了显示您时，我正在这样做-如果您愿意，可以将其全部删除 完成边框，即删除图例CSS 相关CSS：

相关js：

---

工作

你到底想做什么？如果要将标签向右浮动，请使用text align:right。我希望即使字段处于焦点，边框也保持完整谢谢您的帮助当字段处于焦点时，是否可能根本看不到标签？只需替换this.state.labelVisibility==true？classes.cssLabel:classes.cssLabelHide with classes.cssLabelHide，您将得到您想要的内容我需要一个标签来显示，但在字段处于焦点后，它将不会显示标签以显示在顶部切割边框的位置？

legend { border:1px solid red; display:none; }

const styles = theme => ({
  cssLabel: {
    color: "green"
  },

  cssLabelHide: {
    display: "none"
  },
});

<TextField
        id="standard-name"
        label="Name"
        className={classes.textField}
        value={this.state.name}
        onChange={this.handleChange("name")}
        margin="normal"
        variant="outlined"
        InputLabelProps={{
          classes: {
            root:
              this.state.labelVisibility === true
                ? classes.cssLabel
                : classes.cssLabelHide,
            focused: classes.cssFocused
          }
        }}
        InputProps={{
          classes: {
            root: classes.cssOutlinedInput,
            focused: classes.cssFocused,
            notchedOutline: classes.notchedOutline
          },
          inputMode: "numeric"
        }}
      />