在顶部材质UI <Textfield />上垂直对齐文本

Question

我有这个组成部分

@metafield = ShopifyAPI::Metafield.new

应用高度，使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 />中使文本垂直对齐。

我该怎么做？

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>
}

更新：我添加了Demo on sandbox。

查看this，了解有关flexbox的更多信息