How to eliminate the inner padding border within a Material UI Outlined Text Field

I am currently utilizing the Material UI v5 Outlined TextField component to develop a form. In the image below, you can see a white padding border appearing in the TextField. I have created CSS that changes the input field color to yellow when focused.

This is the code I am using:

// My CSS Styles
.OutlinedTextFieldCSSStyle {
    font-size: 13px !important;
    padding: 0 !important;
}

// Material-Ui styles
export const useStyles = makeStyles({
    OutlinedTextField: {
        "& .MuiOutlinedInput-root": {
            "& fieldset": {
                borderColor: "#949595",       // grey color
                borderWidth: 1.5,
            },
            "&:hover fieldset": {
                borderColor: "#949595",       // grey color
            },
            "&.Mui-focused fieldset": {
                outline: "none",
                borderColor: "#949595",       // grey color
                boxShadow: "0 5px 5px 0px #949595",
            },
        },

        "& .Mui-focused": {
            "& .MuiOutlinedInput-input": {
                backgroundColor: "#FFFF80 !important",       // yellow color
                borderColor: "#FFFF80 !important",           // yellow color
                borderWidth: 0,
                outline: "none",
            },
        },
        "& .MuiOutlinedInput-input": {
            backgroundColor: "#F5F5F5 !important",
            borderWidth: 0,
            outline: "none",
            borderColor: "white !important",
        },
    }
});

// TextField Component
<TextField
    {...params}
    type="text"
    size="large"
    variant="outlined"
    fullWidth
    className={classes.OutlinedTextField}
    InputProps={{
        ...params.InputProps,
        classes: {
            input: "OutlinedTextFieldCSSStyle",
        },
    }}
/>


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

Is there a way for me to eliminate the white padding border so that the entire background color of the textfield appears as yellow/grey and the font size fills the entire textbox?

Answer №1

To implement padding: 0 in the .MuiOutlinedInput-input style definitions, you can include it within your existing styles like this:

const customStyles = makeStyles({
  OutlinedTextField: {
    // ... other styles here
    "& .MuiOutlinedInput-input": {
      backgroundColor: "#F5F5F5 !important",
      borderWidth: 0,
      outline: "none",
      borderColor: "white !important",
      padding: 0 // applies zero padding
    }
  }
});

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 arise when trying to implement Angular SCSS with ngx-datatable

I am encountering an issue with my SCSS. It seems that the CSS command from the SCSS file below is not being utilized. This particular SCSS file is generated with the component. Interestingly, when I place the code in the styles.scss file included in the ...

If I use npm install to update my packages, could that cause any conflicts with the code on the remote server?

As I navigate through the numerous issues, I stumbled upon the command npm ci that is supposed to not change the package-lock.json file. However, when I attempt to run npm ci, it fails: ERR! cipm can only install packages when your package.json and package ...

Having issues with the functionality of my radio button in AngularJS

As I delve into Angular and experiment with some code, I am focusing on implementing the following functionality: 1. Depending on the user's preference for adding additional details, they can choose between 'yes' or 'no' using radi ...

Video background with alternate image for touchscreen devices

Check out this website! The background video is functional on desktops. On smaller screens, an image is shown instead using CSS display property. However, what should be done for touch screens like iPads, which are not exactly small? Here's the code ...

I am having an issue in React.js where my state is not updating until the second click instead of the first one

Whenever I click items on my dropdown menu, the state only updates after clicking twice. I have provided a video and some code snippets for reference. How can I resolve this issue? https://i.sstatic.net/LkXUx.gif Parent Class Component (APP): class App e ...

Exploring the synergies between Angular Dragula and utilizing the $index property

Currently, I have implemented an ng-repeat of rows that can be rearranged using Angular Dragula. Despite successful drag-and-drop functionality, the $index in ng-repeat remains constant for each item even after reordering. The screenshot below depicts the ...

Why won't the CSS update in Next.js when the local state variable changes on page load?

I seem to be facing an issue with a variable stored in localStorage that changes when using a toggle button. The color changes correctly upon toggling the button, but upon page refresh, it doesn't display the correct color saved in local storage. Eve ...

Optimal approach for reutilizing Javascript functions

After creating a simple quiz question using jQuery, involving show/hide, addClass, and tracking attempts, I am now considering how to replicate the same code for multiple questions. Would it be best practice to modify all variables in both HTML and jQuery, ...

Troubleshooting the excessive time taken for Angular Material tree re-rendering

I am currently using mat-tree with large data sets in child nodes retrieved from an API call, with each child node containing around 3k records. My approach involves updating the dataSource by adding the children from the API under the existing dataSource ...

The file is definitely present, yet a 404 error is still showing up

I'm encountering a 404 error for a file that undeniably exists. The file can be found at domain.com/video/videoname.mp4. But when attempting to play it using Flash, the message "video not found or access denied" pops up. This issue persists with rep ...

Ensure that the central section of the slider remains illuminated

Looking for help with customizing my "product" slider, lightSlider. I want the middle div to always be highlighted when navigating through the slider. Here's what it looks like currently: Link to screenshot - current. My goal is to achieve this look: ...

Can you please provide the appropriate PropTypes for a dictionary in a ReactJS project?

Looking for something along the lines of y = {"key0": [value0, value1], "key1":[value2]} What is the proper way to define the proptypes for y? ...

Tips for positioning button to the right of a text box in Bootstrap

Is there a way to align my button with my text boxes so that the right sides form a straight line? I've been struggling to achieve this without using margin-left (as it only works for one screen size). https://i.sstatic.net/RrEYV.png I attempted to ...

Error in delete operation due to CORS in Flask API

After successfully developing a rest api in Flask and testing all api endpoints with Postman, I encountered an issue while working on an application in Javascript that consumes the resources of my api. The problem lies in consuming an endpoint that uses t ...

Grid layout with card tiles similar to Google Plus

I'm looking to develop a scrolling grid with card tiles similar to Google Plus that has three columns. I am currently using Material UI, but I can't seem to find the right functionality for this. I have experimented with the standard Material UI ...

Mastering the art of handling errors with Javascript Promises

Through thorough research and some assistance, I have managed to create and annotate code that I believe will enhance the comprehension of Javascript Promises for individuals. However, I encountered a puzzling issue when attempting to trigger an error by ...

Executing the onSuccess callback in Ajax without any ability to manipulate the ajax requests

My dilemma lies in needing to execute a JavaScript function upon the successful completion of an AJAX call. Unfortunately, I am unable to directly manage the AJAX calls as they are handled by the DNN5 framework. Is there a way for me to trigger my functio ...

Having issues with the functionality of the jQuery HTML function

I'm working on this jQuery code snippet: $('#wrapper').html('<img src="/loading.gif">'); var formdata = $("#validateuserform").serialize(); $.post("/userformdata.php",formdata,function(html){ if(html) ...

unable to transfer PHP variable into a JavaScript function

I am having trouble invoking a JavaScript function when trying to pass a PHP array element as an argument. Despite my efforts, I have not yet found the solution. Here is the snippet of PHP code where the issue arises: var_dump($theRow[11]); $htmlBuffer = ...

Issue with Spyscroll functionality

Having some trouble getting Spyscroll to work. Can anyone help me identify the issue? I've been at it all day... I've attempted both the javascript and html+css setups, but neither seem to be functioning correctly. Manually adding the "active" c ...