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

Question

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

以下是展示问题的代码框：https://codesandbox.io/s/nice-sound-vjsm4?file=/src/App.js

有人知道如何在TextField中更新文本吗？谢谢。

Answer 1

尝试将textInput类移动到Grid而不是TextField上。

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

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