React Material-UI Textfield padding top - Thai Language

Question

I'm use the library for input. But when use with Thai language, it need additional top padding to display word correctly as Thai has 2 level of vowel. For example, word like "ที่นั่น" will be cut on the top. Below is the code I use.

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

When i put word "ที่นั่น" inside Textfield will display only this. I try various style to change this but not success.

Screencap run of the code

Answer 1

Thank you for all your comment. For my case, I found out that I need to put paddingTop in InputProps. So, the code I use is:

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

and then

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

Answer 2

To fix you problem need to update default styles:

1. Add class name for text field

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

2. In you styles add this class and reset styles for input:

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

See live example:

---

I'm make pull request to fix it. With new release I think fixed it.

Answer 3

Since you are using MUI you can use their css wrapper function withStyles like this

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

and then

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

After this you just need to wrapp your component in withStyles HOC:

export default withStyles(styles)(NameOfYourComponent);