Material UI Theme Overrides how to correctly update gap between label and input

0
votes

I'm trying to update my MUI themes using the overrides functionality.

This is what I have for my input field:

Input Example

I want to increase the gap between the label and the input field.

This is the overrides code that I have:

const overrides: Overrides = {
  MuiInput: {
    root: {
      backgroundColor: 'white',
      border: '1px solid #cdcfd1',
      borderRadius: 10,
      height: 50
    }
  },
  MuiInputBase: {
    root: {
      marginTop: 25
    }
  },
  MuiInputLabel: {
    asterisk: {
      '&$error': { color: '#eb131b' },
      color: '#eb131b',
      float: 'left',
      marginRight: 5
    },
    root: {
      '&$focused': {
        color: '#222',
        transform: 'translate(0, 0)'
      },
      color: '#222',
      fontSize: 16,
      fontWeight: 'bold',
      top: 0,
      transform: 'translate(0, 0)'
    },
    shrink: {
      transform: 'translate(0, 0)'
    }
  }
};

I want to change the MuiInputBase margin to 25 but it is being overridden by the following:

CSS Output

What is the correct way to update this via the theme overrides?

Extra: Here's a link to a Code Sandbox to play around with the issue: https://2gv94.csb.app/

2
cssmaterial-uimaterial-designoverridingthemes
Please give us a codesandbox to check this out! – gikall
Ok I'll get to work on that – Barry Michael Doyle
@gionic here it is: 2gv94.csb.app – Barry Michael Doyle

2 Answers

1
votes

Please add inside overrides and inside your MuiInput

formControl: {
  "label + &": {
    marginTop: "25px"
  }
}

Check the example here

0
votes

You can use:

MuiInput: {
  formControl: {
    "label + &": {
      marginTop: 25
    }
  }
},