Is there a way to modify the spacing between labels and text in the TextBox MUI component while using custom label sizes?

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

I've customized a material ui TextField component by increasing the font size of the label. However, I'm facing an issue where the gap in the border for the label remains unchanged despite the larger text size.

I couldn't find any solution in the official documentation, so I need some assistance in resolving this issue.

Here are the CSS rules I'm currently using:

const CssTextField = styled(TextField)({
  "& .MuiOutlinedInput-root": {
    "& fieldset": {
      borderColor: "white",
    },
    "&:hover fieldset": {
      borderColor: "white",
    },
    "&.Mui-focused fieldset": {
      borderColor: "#1976D2",
    },
  },
  input: {
    color: "white",
    fontSize: "16px",
  },
  label: {
    color: "white",
    fontSize: "16px",
  },
});
javascriptcssreactjsmaterial-ui

Answer №1

If you want to adjust the size of the text inside the legend, you can modify the font-size property as shown below:

"& .MuiOutlinedInput-root": {
  "& fieldset>legend": {
     fontSize: "1.25em", //you can customize this value
 },

Answer №2

To enhance the appearance of your label, consider inserting the following code snippet into your CSS file. This will create a background effect that can overlap the border:

.MuiInputLabel-outlined.MuiInputLabel-shrink {
  background-color: #FFF !important;
}

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

Issues relating to the total count of pages in the uib-pagination component of AngularJS

While there is a previous thread discussing a similar topic Calculating total items in AngularJs Pagination (ui.bootstrap) doesn't work correctly, it does not address my specific issue and I am unsure how to contribute to it. We are using a complex s ...

javascripthtmlangularjsangularjs-directivepagination

Exploring alternatives to ref() when not responsive to reassignments in the Composition API

Check out this easy carousel: <template> <div ref="wrapperRef" class="js-carousel container"> <div class="row"> <slot></slot> </div> <div class=&q ...

javascriptvue.jsvuejs3vue-composition-api

Updating the authentication code in passport.js

In the project, there is a passport.js file that contains authentication related code: const axios = require('axios') const uuid = require('uuid/v4') const passport = require('passport') const LocalStrategy = require('pa ...

javascriptnode.jsexpresspassport.js

Can you explain the distinction between 'rxjs/operators' and 'rxjs/internal/operators'?

When working on an Angular project, I often need to import functionalities like the Observable or switchMap operator. In such cases, there are two options available: import { switchMap } from 'rxjs/operators'; or import { switchMap } from ' ...

javascriptangulartypescriptimportrxjs

The persistent underline on the tooltip just won't go away

Hey there, this is my first time posting a question here so I hope I got everything right! I'm currently in the process of creating a form for a WordPress site using Bootstrap. I need to incorporate tooltips with Font Awesome icons, but for some reas ...

csswordpressbootstrap-4

How to smoothly transition a div from one location to another using animations in an Ionic3-Angular4 application

I'm attempting to incorporate some animation into my Ionic 3 mobile app. Specifically, I want to shift a div from one location to another. In the code snippet provided below, I am looking to move the div with the "upper" class after the timeline-item ...

javascriptangularcssionic2angular-animations

Removing leading zero from ng-change value in controller

One example of my input field is shown below: <input id="0900" type="radio" ng-model="formData.appointment_hour" ng-change="change(0900)" name="appointment" value="0900" class="ng-valid ng-dirty"> After inspecting the function in my controller, I n ...

javascriptjqueryangularjszeroangularjs-ng-change

An unexpected error occurred: ReferenceError - document is undefined

Error Alert: Unhandled Runtime Error ReferenceError: doc is not defined Source of Issue components\Modal.js (42:18) @ updateDoc 40 | await uploadString(imageRef, selectedFile, "data_url").then(async (snapshot) => { 41 | const do ...

javascriptreactjsgoogle-cloud-platformgoogle-cloud-firestorenext.js

Include an item in a Vuetify model's array of objects

Currently, I am attempting to store the value of a dynamically loaded radio button into an array of objects. These radio buttons serve as options for a set of questions within a form, and my desired output is as follows: [{"question1":{ " ...

javascriptvue.jsvuetify.jsv-model

Trigger the ASP .NET OnCheckedChange server event using JavaScript

One issue I encountered is related to a checkbox with an OnCheckedChanged event. Occasionally, I modify the checked status of the checkbox using javascript. However, when this occurs, the OnCheckedChanged event does not trigger. Is there any method to ens ...

javascriptjqueryasp.net

Heroku - JavaScript and CSS Updates Causing Loading Issues

Ruby version: 2.1.5 | Rails version: 4.1.1 For some reason, the changes I make to my JavaScript and CSS files are not reflecting on Heroku; it seems like the cached assets are still being used. I've tried removing the assets and precompiling them bef ...

javascriptcssruby-on-railsherokuruby-on-rails-4.1

Footer at the bottom and a sticky navigation bar

I have experimented with various CSS guides in order to place the footer at the bottom of the page, and I have found the example below to be the simplest method. html, body, #root { height: 100%; } #root { display: flex; flex-direction: column; } ...

htmlcss

Implementing diverse color gradients to individual vertices within a geometry using three.js

My goal is to enhance the functionality of this code snippet so that when the button is clicked, the selected mesh's neighborhood vertex is highlighted with a gradient effect. function addSphere() { var position = new Array(); var notAboveGround = tr ...

javascriptthree.js

Is there a way to deactivate other dropdown options?

To simplify the selection process, I would like to disable the options for "Province", "City", and "Barangay". When the user clicks on the "Region" field, the corresponding "Province" options should be enabled. Then, when a specific province is selected, t ...

javascriptphphtml

JSF CommandLink malfunctions on Firefox when reRendering an entire form

I am currently working on a JSF 1.2 application (Sun RI, Facelets, Richfaces) that was previously designed only for IE6 browsers. However, we now need to extend our support to include Firefox as well. On one of the pages, there is a form with a button tha ...

javascriptajaxjsfrichfaces

Creating an email body using css and html from a file on Android - how can it be done?

After searching extensively, I have come across a plethora of solutions on how to load HTML into the body of an email intent. However, I am struggling to find a way to load a file that contains CSS and HTML content. I have a specific program in which I dis ...

htmlcssemailandroid-intent

The behavior of the jQuery click function seems to be quirky and not functioning as expected. Additionally, the

It seems that instead of triggering a POST request, somehow a GET request is being triggered. Additionally, the ajax call is not being made as expected. I have attempted this many times before, but none of my attempts seem to be working. It could potenti ...

javascriptjqueryajax

Optimal guidelines for logging in

After successfully creating a website using HTML, CSS, and JavaScript, I am now looking to implement a login feature to provide privacy for certain users. I have noticed that some developers use PHP, while others use JS or Node.js for this purpose. However ...

javascripthtmlnode.jsauthentication

How can Material UI React handle long strings in menu text wrapping for both mobile and desktop devices?

Is there a way to ensure that long strings in an MUI Select component do not exceed the width and get cut off on mobile devices? How can I add a text-wrap or similar feature? Desktop: https://i.sstatic.net/lo8zM.png Mobile: https://i.sstatic.net/8xoW6. ...

javascriptcssreactjstypescriptmaterial-ui

Customize the color of a Bootstrap btn-group

Is there a way to modify the background color of the active or selected button within a button group? <div class="btn-group" role="group" aria-label="Basic radio toggle button group"> <input type="radio" c ...

htmlcsstwitter-bootstrap