CODEWITHSUNDEEP
reactjsmaterial-ui
user1589188
user1589188

Reputation: 5736

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

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?

Upvotes: 3

Views: 8582

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81713

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

Upvotes: 10

Related Questions