在頂部材質 UI 上垂直對齊文本<Textfield />

Question

我有這個組件

const styles = theme => ({
  height: {
    height: '20rem',
  },
});

class Foo extends React.component { 
    ...

    <TextField
      InputProps={{ classes: { root: this.props.classes.height } }}
      label="Kittens"
      placeholder="Meooow"
      fullWidth={true}
      margin="normal"
      variant="outlined"
      notched={true}
      value={this.state.kittyCat}
      onChange={event => this.onChangeKittens(event)}
      multiline={true} />
}

應用高度，使<TextField />更大。 但是，我想在<TextField />垂直對齊文本。

我該怎么做呢？

Answer 1

您可以使用 flex 垂直對齊文本，例如：

display:flex;
flex-direction: column;
justify-content: center;

然而，Material-UI TextField 創建了一個div容器，它有兩個內部元素——另一個div和一個label 。

label部分默認具有absolute位置（對於動畫標簽效果），如果沒有一些毛茸茸的 css 覆蓋，這可能很難實現您想要的。

更好的方法可能是在TextField容器上設置樣式。 您可以使用示例代碼中的材料樣式系統執行此操作：

const styles = theme => ({
  container: {
    height: '20rem',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
  },
});

class Foo extends React.component { 
    ...
    <form className={classes.container}>
       <TextField
         ... />
    </form>
}

更新：我在 sandbox 上添加了一個演示。 更新：固定括號

查看此以了解有關 flexbox 的更多信息