材质 UI 文本字段标签位置不正确

Question

我正在使用Material UI为我正在设计的Web应用程序创建UI。使用主题间距在Grid内放置一些TextFields后，我遇到了TextField的内部文本不再在其容器内居中的问题。一旦我从应用于TextField的样式中删除主题间距，就没有问题了。

下面是一个展示该问题的代码沙箱： https://codesandbox.io/s/nice-sound-vjsm4?file=/src/App.js

有谁知道如何在其TextField内重新居中文本？谢谢。

Answer 1

尝试将 textInput 类移动到网格而不是文本字段。

<Grid item xs={6} className={classes.textInput}>
<TextField
id="project-client"
label="Client"
variant="outlined"
/>
</Grid>

如果您检查并查看 HTML，似乎 Material-UI 不会将该类应用于标签，而只会应用于输入。在网格级别移动类应将其应用于整个容器(标签和输入(