材料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不会将该类应用于标签，而仅应用于输入。在网格级别移动类应将其应用于整个容器（标签和输入）