React Material-UI Textfield padding top - 泰语

Question

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

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

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

Screencap run of the code

Answer 1

由于您使用的是 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 2

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

为文本字段添加 class 名称

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

在您的样式中添加此 class 并重置样式 input:

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

查看实例：

我正在 pull request 修复它。我认为在新版本中修复了它。

Answer 3

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

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

然后

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

React Material-UI Textfield padding top - 泰语

React Material-UI Textfield padding top - Thai Language

textfield

thai

reactjs

material-ui