我有这个组件
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 />
中垂直对齐文本.
我该怎么做?
最佳答案
您可以使用 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 的信息
关于javascript - 在顶部 Material UI <Textfield/> 上垂直对齐文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56575404/