How to center placeholder and text in React Material UI TextField

Question

Current Design:

Expected design:

The TextField tag looks like this:

<TextField
        multiline={false}
        autoFocus
        placeholder={props.defaultAmt}
        helperText="Enter amount to pay"
        margin="normal"
        InputProps={{
            startAdornment: <InputAdornment position="start">₹</InputAdornment>
        }}
        />

I want to center everything in the TextField. I have tried using textAlign: 'center' but it doesn't work.

Answer 1

You could override the positionStart rule in the InputAdornment component, by a margin percentage depending on your size and other parameters that affect your Textfield style. I would suggest something like this (I am supposing you are generating your styles with makeStyles, but adapt by your own means).

To center the helperText, just add a Typography component into the prop, since it is of a node type. Add a style to the Typography component to center the text and it should work:

const useStyles = makeStyles(() => ({
  centerAdornment: {
    marginLeft: "50%" // or your relevant measure
  },
  centerText: {
    textAlign: "center"            
  }
}));

And the overriding:

<TextField
    multiline={false}
    autoFocus
    placeholder={props.defaultAmt}
    helperText={
                  <Typography 
                    variant="caption" 
                    className={classes.centerText}
                    display="block"
                  >
                      Enter amount to pay
                  </Typography>
               }
    margin="normal"
    InputProps={{
        startAdornment: (
            <InputAdornment 
                 position="start"
                 classes={{ positionStart: classes.centerAdornment}}
            >
                ₹
            </InputAdornment>
    }}
/>