CODEWITHSUNDEEP
reactjsmaterial-ui
Kurtis
Kurtis

Reputation: 1282

Material-UI Core TextField globally set InputLabelProps shrink

Does anyone know how to globally override the shrinking of the label with a Material-UI Textfield (or Input if I need to use this)?

I dont want to add this everywhere: 

...      
InputLabelProps={{
    shrink: true,
}}

but I cant seem to figure out the correct override in createMuiTheme.

I have tried adding shrink: true here

overrides: {
    MuiInput: { ...

and here

overrides: {
    MuiInputLabel: { ...

But I cant get it working.

If someone could point my to the docs/code to where they figured this out too, that would be awesome!

Thanks

Upvotes: 7

Views: 36112

Answers (7)

Akilesh
Akilesh

Reputation: 51

From MUI V7 pass slotProps as props InputLabelProps is depreciated

slotProps={{ inputLabel: { shrink: true } }}

Upvotes: 0

Maldaer
Maldaer

Reputation: 72

Luke-Peavey has a great answer but this has now been deprecated in favor of a more generalized slotProps prop.

Use slotProps.inputLabel instead. This prop will be removed in v7. See Migrating from deprecated APIs for more details.

The updated answer now looks like

import {TextField} from "@mui/material";

function CustomTextField({ InputLabelProps = {}, ...props }) {
  return (
    <TextField
      slotProps={{inputLabel: {...InputLabelProps, shrink: true} }}
      {...props}
    />
  );
}

Upvotes: 0

Andrey Patseiko
Andrey Patseiko

Reputation: 4495

Check the Mui documentation on theme default props.

Every Material UI component has default values for each of its props. To change these default values, use the defaultProps key exposed in the theme's components key.

You can try this.

    MuiTextField: {
      defaultProps: {
        variant: 'outlined',
        margin: 'dense',
        size: 'small',
        fullWidth: true,
        InputLabelProps: { shrink: true } // <----
      }
    }

Upvotes: 7

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20118

We can use InputLabelProps property to enable the shrink option

const CustomTextField = ({
    label,
    value,
    maxLength,
    required,
    disabled,
    handleChange,
    handleClear,
    error,
    helpertext,
    shrink
}) => {
    return (
        <TextField
            label={label}
            fullWidth
            size='small'
            variant='standard'
            value={value}
            inputProps={{ maxLength: (maxLength && parseInt(maxLength)) || 99}}
            InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }} // we can mention this way to shrink the label
            required={required}
            onChange={handleChange}
            InputProps={{
                endAdornment: (
                    (value.length > 0 && !disabled) ? <IconButton onClick={handleClear}>
                        <ClearOutlinedIcon/>
                    </IconButton> : ''
                ),
                readOnly: disabled
            }}
            error={error}
            helperText={helpertext}
        />
    )
}

CustomTextField.propTypes = {
    disabled: PropTypes.bool.isRequired,
    error: PropTypes.bool.isRequired,
    handleChange: PropTypes.func.isRequired,
    handleClear: PropTypes.func.isRequired,
    helpertext: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    maxLength: PropTypes.string,
    required: PropTypes.bool.isRequired,
    value: PropTypes.string.isRequired,
}

Upvotes: 0

sornman
sornman

Reputation: 1

If you really don't want to bother with creating a custom component, you can use theme overrides to get it close. Simply copy the shrink css properties to the MuiInputLabel. Something like this:

MuiInputLabel: {
  outlined: {
    transform: 'translate(14px, -6px) scale(0.75)',
    transformOrigin: 'top left',
    padding: '0 2px',
    background: '#ffffff',
  },
},

It's not perfect, as the padding is applied to both the shrink and override, but it's very close.

Also, if you aren't using 'outlined', you don't need the padding or background properties and it should look identical to the other fields with 'shrink'.

Upvotes: -1

Luke Peavey
Luke Peavey

Reputation: 3889

Just to clarify, in version 1 (and later) theme overrides allow you to customize a component's styles, not props. This is approach is a lot more powerful as it gives you full control over all Material UI Styles.

In this case, you would need to modify the styles for each TextField variant so the shrink styles are applied by default (see implementation)

The best solution is to create a custom variation of the component, as Alireza suggested. Here is an example:

import TextField from "@material-ui/core/TextField";

function CustomTextField({ InputLabelProps = {}, ...props }) {
  return (
    <TextField
      InputLabelProps={{ ...InputLabelProps, shrink: true }}
      {...props}
    />
  );
}

Edit Material UI - Custom TextField

Upvotes: 11

Alireza Yadegari
Alireza Yadegari

Reputation: 305

if you want to override some method of the basic component, in my opinion, the best way is to create custom component and change whatever you need then use your own component inside your project . for this react gives you anything you want

Upvotes: 2

Related Questions