Material-UI: How to remove the transformation of InputLabel?

user_1589188 0
Viewed 1798

Trying to remove some default transformation of InputLabel inside a FormControl, I wonder if there is a way to remove it instead of having to override each property one by one?

e.g. the following works but have to provide overriding values and leaves other defaults:

createMuiTheme({
    overrides: {
        MuiInputLabel: {
            formControl: {
                position: "unset",
                transform: "none"

I am looking for a way to remove the properties entirely:

createMuiTheme({
    overrides: {
        MuiInputLabel: {
            formControl: {} <-- as in nothing in formControl, but this does not work

Can this be done?

material-ui reactjs
1 Answers

You can set shrink to false in InputLabelProps to remove the transformation of the input label when editing.

<TextField InputLabelProps={{ shrink: false }} />

But the problem is that if you have any value, it will overlap with the label since there is no transformation. The solution is to remove the label if the value is not empty:

function App() {
  const [value, setValue] = useState("");

  return (
    <TextField
      variant="outlined"
      label={value ? " " : "my label"}
      InputLabelProps={{ shrink: false }}
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

Live Demo

Edit little-hooks-1866k

user_94494260
Related