React - Material label not in right position in Textfield

user_10686620 0
Viewed 317

enter image description here

I tried create the MUI textfield using same code in Codesandbox but everything works fine.

I tried to follow this post but not working

Can anyone give me some ideas of how to fix this issue? enter image description here

const textfieldUseStyles = makeStyles((theme) => ({
  root: {
    "& > *": {
      margin: "auto",
      width: "100%",
    },
  },
}));
...
const textFieldClasses = textfieldUseStyles();
return (
              <form className={textFieldClasses.root}>
                <TextField
                  key="Confirmation Code"
                  variant="outlined"
                  id="email"
                  label="Post title"
                  name="email"
                  autoComplete="confirmation code"
                  value="123"
                  InputLabelProps={{ shrink: true }}
                />
              </form>
)

Updated 1

After I added css class below, it changed to more good UI enter image description here

.MuiInputLabel-outlined.MuiInputLabel-shrink {
  transform: translate(0, -6px);
  font-size: 12px;
  margin: 0 14px;
  background-color: white;
}

What I want is something like this, at least the label is in right position: enter image description here

material-ui reactjs css javascript
1 Answers

makeStyle is deprecated in Mui-v5 !!!

you can change textFiled border and other properties in various ways like:

  1. the sx prop:
     <TextField
          sx={{ '& .MuiOutlinedInput-root': { borderRadius: '20px' } }} // change border form here
          key="Confirmation Code"
          variant="outlined"
          id="email"
          label="Post title"
          name="email"
          autoComplete="confirmation code"
          value="123"
          InputLabelProps={{ shrink: true }}
        />
  1. Mui styled component way(using emotion)
import { styled } from '@mui/material/styles'
import TextField from '@mui/material/TextField'

export const StyledTextField = styled(TextField)(() => ({
  '& .MuiInputBase-root': {
    borderRadius: 20
  }
}))
user_87182300
Related