reactjs - React Material-UI 文本字段填充顶部 - 泰语

Question

我正在使用该库进行输入。但是当与泰语一起使用时，它需要额外的顶部填充才能正确显示单词，因为泰语有 2 级元音。例如，“ที่นั่น”之类的单词将在顶部被剪切。下面是我使用的代码。

      <Grid item xs={12} md={10}>
        <TextField required id="name" label="Remark name" fullWidth />
      </Grid>

当我在 Textfield 中输入单词“ที่นั่น”时，只会显示这个。我尝试了各种风格来改变这一点，但没有成功。

截屏运行代码

Answer 1

感谢您的所有评论。就我而言，我发现我需要将 paddingTop 放在 InputProps 中。所以，我使用的代码是：

const styles = theme => ({
  thaiTextFieldInputProps:{
    paddingTop: '5px'
  },
});

进而

<TextField
   InputProps={{
      classes: {
         input: classes.thaiTextFieldInputProps
      }
   }}
   label="Thai Remark"
   fullWidth
/>

Answer 2

由于您使用的是 MUI，因此您可以像这样使用他们的 CSS 包装函数 withStyles

const styles = theme => ({
  name: {
    paddingTop: '50px', // for example
  },
});

进而

  <Grid item xs={12} md={10}>
    <TextField 
     className={classes.name}
     required 
     id="name"
     label="Remark name"
     fullWidth
    />
  </Grid>

在此之后，您只需将组件包装在 withStyles HOC 中：

export default withStyles(styles)(NameOfYourComponent); 

Answer 3

要解决您的问题，需要更新默认样式：

1. 为文本字段添加类名

    <Grid item xs={12} md={10}>
      <TextField
        className="fix-thai" // <<<<<
        required
        id="name"
        label="ที่นั่น"
        fullWidth
      />
    </Grid>

2. 在您的样式中添加此类并重置样式input：

.fix-thai input {
  height: 20px;
}

查看实时示例：

---

我提出了修复它的请求。有了新版本，我认为修复了它。