How to remove space between number and sign in OutlinedTextField in Material Ui-CodePudding

I am using material Ui OutlinedTextField here is my code snippet from the TSX file

 <OutlinedTextField
        variant="outlined"
        id="outlined-basic"
        type="number"
        size="small"
        value={parseFloat(Volatility.toFixed(2))}
        onChange={(event) => setVolatility(parseFloat(event.target.value))}
        onKeyPress={(event) => onKeyPressVolatility(event.key)}
        InputProps={{
          className: classes.inputText,
          endAdornment: <InputAdornment position="end">%</InputAdornment>,
        }}
      />

I want to remove space between number and % sign from the OutlinedTextField Your suggestions would be helpful Thanks in Advance

CodePudding user response：

you can simply set the with and the min-with of the textfield to auto, then the same thing with the internal input if you can edit it

CodePudding user response：

It seems that you need to set text-align: right for the input element inside MuiOutlinedInput-root class name.

Not sure where the OutlinedTextField component come from, but you can do like the following.

...
import OutlinedInput from '@mui/material/OutlinedInput';
import { styled } from '@mui/material/styles';

const OutlinedTextField = styled(OutlinedInput)(() => ({
  '& input': {
    textAlign: 'right'
    ...
  }
}))

You can do the same if you use makeStyles hook.