Optimizing Material UI Themes: Adjusting the spacing between labels and inputs for improved design

Currently, I am in the process of updating my MUI themes using the overrides functionality.

This is how my input field looks like:

https://i.sstatic.net/OFAGf.png

I am looking to increase the space between the label and the input field.

Below is the code for the overrides:

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)'
    }
  }
};

Although I want to modify the margin of MuiInputBase to be 25, it seems that another part of the code is overriding it:

https://i.sstatic.net/ewxFv.png

What would be the correct approach to update this through theme overrides?

Additional information: Feel free to check out this Code Sandbox link to explore and address the issue:

cssmaterial-uimaterial-designoverridingthemes

Answer №1

Kindly insert the following code snippet inside overrides and within your MuiInput

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

For reference, you can view the example here

Answer №2

Here is a suggestion:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Floating CSS containers

Apologies for not including a picture. You can view the design I am trying to achieve here. I am attempting to create two boxes with a third box below them, and another box on the right side of the layout. All enclosed within a larger container. Everythin ...

htmlcss-floatcss

Using Google-Prettify with AngularJS

I have been attempting to implement Google Prettify in my AngularJS project. It seems to be functioning correctly on the main page, but once I navigate to another route using Angular (after ng-view), it stops working properly. You can check out the plunker ...

javascriptcssangularjsngroute

Setting a fixed width for the body element results in alignment problems

I'm struggling with aligning divs properly on my HTML page that has a tab using CSS and jQuery. Whenever I try to set a fixed width for the body or main container, everything goes out of place... How can I ensure that the body has a minimum fixed widt ...

htmlcss

What is the best way to create a <div> that will automatically start a new line based on the user's input?

Is it possible to create a div that automatically inserts a new line for each new line in the code it detects when typing? For example, if I type: <div> Hello, World! How are you doing today? </div> This would normally be displayed as ...

htmlcss

What is the best way to implement custom pagination in Material UI?

<Pagination count={35} variant="outlined" shape="rounded" color="primary"/> Although the default background and text colors are set, I am unable to customize them. I have attempted to change the colors without success. ...

reactjsnext.jsmaterial-ui

CSS technique to display background on hover

My website has a bootstrap 'More' dropdown feature on the left navigation bar. However, there is an unwanted background hover effect that I can't seem to remove. Despite removing all background hovers from my CSS, the issue persists. Can any ...

css

What is causing the issue with the edit click function not working in MUIDatatable?

I have the following code snippet where I am attempting to add 'edit' and 'add new record' options for users using MUIDataTable. However, when I click on the 'edit' button, the modal popup does not open. On the other hand, cli ...

reactjsmaterial-uimui-datatablemui-x-data-gridmui-x

A complete div component with a minimum height that is sandwiched between a fixed size header and

I'm currently facing a challenge with setting up my webpage due to the height of my elements causing a bit of a frenzy. Specifically, I have a specific layout in mind: At the top, there should be a header that has a fixed height (let's say 150p ...

htmlcss

Adjusting the height property to zero in the absence of an element

I'm currently working on creating a timeline for changeLogs and populating it with data from an AngularJS controller. The issue I'm facing is that the height of the timeline "Line" is set to 6px. This means that even when there is no data in the ...

angularjscss

What is the best way to locate an item reference for a specific DOM element?

Imagine a vast DOM structure with approximately 10,000 HTML elements, including 1,000 span tags. None of the span elements have any identifiers and are buried deep within other objects with long, complex Xpath paths that are not user-friendly for selectio ...

javascripthtmlcssdomreference

What steps can be taken to enable automatic playback for this slider?

After downloading the slider from this site, I've been attempting to enable autoplay on this slider but have not had any success. Can anyone provide guidance on how I can achieve this? I've tried modifying the code below without achieving the des ...

javascriptjqueryhtmlcss

Steps to include a title next to a progress bar:

Is there a way to achieve something like this? https://i.sstatic.net/dhO2f.jpg I attempted to use bootstrap but I ran into an issue where the title was slightly misaligned below the progress bar. Can someone offer assistance with this matter? Apologies i ...

javascripthtmlcsstwitter-bootstrap-3

Avoiding double entries in the shopping list using DOM selectors in JavaScript

I have been struggling with preventing duplicate items from being added to a shopping list that I created. Even though I thought the code below would solve the issue, it hasn't been effective so far. My expectation was for the JavaScript code to acces ...

javascripthtmlcss

Achieving Desired Styling Without Altering the HTML Structure: A Guide to CSS Formatting

Check out this HTML code: <head> <meta charset="UTF-8"> <title>Countdown</title> <style> /* CSS goes here */ </style> </head> <body> <ul> <li>one</li> ...

css

Issue: The system does not recognize 'cleancss' as an internal or external command

After successfully installing clean-css via npm command line, I was eager to start using it to concatenate and minify some css files. However, my excitement quickly turned to frustration when I encountered this error: 'cleancss' is not recognize ...

cssnode.jscommand-linenpm

Create a Bootstrap jumbotron that is centered and only half of the width

I have a unique password reset method here: Jumbotron-Form-Bootstrap-My-Attempt Displayed below is the code from the image above: <div class="container"> <div class="jumbotron"> <br><br> <h2>Forget Passwo ...

twitter-bootstrapcss

Displaying items in a row when the navbar is collapsed: Bootstrap 4 tips

Is there a way to change the display of items in the collapsed navbar so that they appear next to each other rather than in a column? You can see how it currently looks here: Navbar collapsed. My goal is to have the image displayed next to the username ins ...

htmlcssbootstrap-4

What is the proper way to ensure a pull right display appears correctly?

This is the code I am currently using .tag-container.bottom-border.col-middle h1.text-center {{ tag.name }} button.btn.btn-follow.pull-right(ng-hide="hasFollowed" ng-click="tagArticles.followTag()") Follow I am trying to align the tag name in th ...

cssangularjstwitter-bootstrappug

Restoring styles back to the default CSS settings

I am currently working on creating visualizations using D3, and one challenge that I have encountered is the need to define a lot of styles within my code instead of in my CSS where I would prefer them to be. This necessity arises mainly to support transi ...

javascriptcssd3.js

Implement jQuery to dynamically assign an "Active" class to tab elements based on the current page being loaded

INQUIRIES I have include: How do I apply a class to an element using jQuery, or any other method, for the active tab? Ensure that the dropdown tab appearing is the one containing the active tab, not always the Company one. In essence, I want the ac ...

javascriptjqueryhtmlcss