javascript - 在顶部 Material UI 上垂直对齐文本

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 容器上设置样式。您可以使用示例代码中的 Material 样式系统来执行此操作:

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

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

更新:我添加了一个 Demo on sandbox .更新:固定括号

检查 this了解更多关于 flexbox 的信息