React Material-UI Текстовое поле сверху - тайский язык

Question

Я использую библиотеку для ввода. Но при использовании с тайским языком для правильного отображения слова требуется дополнительный верхний отступ, так как тайский язык имеет 2 уровня гласной. Например, слово «ที่ นั่น» будет вырезано сверху. Ниже приведен код, который я использую.

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

Когда я помещу слово "ที่ นั่น" в поле текста, будет отображаться только это. Я пробую разные стили, чтобы изменить это, но не успех.

Сценарий запуска кода

Answer 1

Спасибо за все ваши комментарии. В моем случае я обнаружил, что мне нужно поместить paddingTop в InputProps. Итак, код, который я использую:

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

, а затем

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

Answer 2

Для решения проблемы необходимо обновить стили по умолчанию:

1. Добавить имя класса для текстового поля

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

В ваших стилях добавьте этот класс и сбросьте стили для input:

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

См. Пример в реальном времени:

---

Я делаю запрос на получение , чтобы исправить это. С новым выпуском я думаю исправил.

Answer 3

Поскольку вы используете MUI, вы можете использовать их css функцию-обертку с такими стилями, как этот

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 HO C:

export default withStyles(styles)(NameOfYourComponent);