Changing the background of a Muitextfield input element conceals the label

Struggling to customize the Textfield from the global theme? Can't seem to achieve a colored background for the input only (white) without obscuring the label when it moves inside the input.

Desired result : https://i.sstatic.net/us2G7.png

Current outcome : https://i.sstatic.net/So3LS.png Tried using white background with transparency to show text behind it, but removing transparency completely hides the label behind the white background as shown here: https://i.sstatic.net/9biAT.png

Below is the snippet from my theme :


export const testGlobal = createMuiTheme({
  palette: {
    common: {
      black: "#000",
      white: "rgba(255, 255, 255, 1)",

      blue: {
        light: "rgba(184, 244, 255, 1)",
        default: "rgba(0, 219, 255, 1)",
        dark: "rgba(0, 184, 213, 1)",
      },
      red: {
        light: "#ff1744",
        default: "#fd0031",
        dark: "#e3002c",
      },
      orange: {
        light: "#ffc046",
        default: "#ff8f00",
        dark: "#c56000",
      },
      grey: {
        light: "rgba(99, 99, 99, 1)",
        medium: "rgba(99, 99, 99, 1)",
        paper: "rgba(65, 65, 65, 1)",
        default: "rgba(99, 99, 99, 1)",
        dark: "rgba(60, 60, 60, 1)",
      },
    },
  },
});

testGlobal.root = {
  borderColor: "rgba(85, 85, 85, 1)",
};
testGlobal.img = {
  width: "79%",
};
testGlobal.palette = {
  ...testGlobal.palette,
  vumeter: {
    top: "#fd0031",
    mid: "#ff8f00",
    bottom: "rgba(0, 219, 255, 1)",
  },
  playlist: {
    playing: "#ef5350",
  },
  background: {
    light: "rgba(99, 99, 99, 1)",
    medium: "rgba(99, 99, 99, 1)",
    paper: "rgba(65, 65, 65, 1)",
    default: "rgba(99, 99, 99, 1)",
    dark: "rgba(60, 60, 60, 1)",
  },
  primary: {
    light: "rgba(184, 244, 255, 1)",
    main: "rgba(0, 219, 255, 1)",
    dark: "rgba(0, 184, 213, 1)",
    contrastText: "rgba(255, 255, 255, 1)",
  },
  text: {
    primary: "rgba(255, 255, 255, 0.87)",
    secondary: "rgba(255, 255, 255, 0.54)",
    disabled: "rgba(255, 255, 255, 0.38)",
    hint: "rgba(255, 255, 255, 0.38)",
  },
};
testGlobal.overrides = {
  MuiFormLabel: {
    root: {
      background: "black",
      fontWeight: "bolder",
      color: "grey",
      "&.Mui-focused": { color: "grey" },
      paddingLeft: theme.spacing(1),
    },
  },
  MuiInput: {
    root: {
      fontWeight: "bolder",
      background: "white", // the white background that keep hiding my label :(
      padding: theme.spacing(1),
      color: "black",
    },

  },
};

testGlobal.props = {
  MuiInput: { disableUnderline: true },
};

No additional styling applied to the textfield component

Why does the background cover the label? :(

javascriptcssreactjsmaterial-ui

Answer №1

If you're able to provide a link to a functional code on a JavaScript sandbox platform like codesandbox.io, it would greatly assist in diagnosing the issue at hand. However, it appears that the problem may be related to a z-index conflict. Consider incorporating something like position: relative; z-index: 99; into the label. The z-index property dictates the stacking order on the webpage, so this adjustment should resolve the issue.

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

What is the best way to create an array in jQuery based on the presence of set variables?

Currently, I am working with 5 different variables in my project: var item_id var status var next_contact var email var phone_number var comment These variables are being sent to my server via a POST request enclosed in an array: data = {'item_id&a ...

javascriptjquery

Executing PHP script using HTML button in combination with Ajax and Javascript

I have a PHP function that I would like to execute from an HTML button that I have. The PHP function is located in a separate file from the HTML button. I have achieved this using: <input type="submit" name="test" id="bt1" value="RUN" /><br/> ...

javascriptphpjqueryajaxfunction

String variable representing the name of a React element

As I was reviewing the source code of a React UI library, I stumbled upon an interesting code pattern that I will simplify here: function Test() { let Button = "button"; // ... return <Button>Click me</Button>; } I'm curious about ...

javascriptreactjs

Establishing the Initial State of React Context with Data from Apollo Query

In my React.js project, specifically with Next.js, I have implemented a global React context for managing user data. Here is how the context is structured: const UserContext = createContext<{ user: User | undefined; setUser: (u: User | undefined) =& ...

reactjsreact-hooksnext.jsapollo-clientreact-apollo

Why doesn't next-intl offer a feature to define default messages within components?

Why is it that next-intl (along with certain other react translation tools) choose not to offer a direct way to define default messages within components? For instance: The usage of next-intl looks like this: /* get the t function from a hook or elsewher ...

reactjsnext.jsinternationalizationnext-intl

How can I adjust the position of a target point in the chase camera using THREE.js?

Recently, I've delved into the world of THREE.js and decided to create a game featuring a spaceship as the main element. Utilizing a chase camera for my model, I encountered a challenge where I needed to adjust the camera's position in relation t ...

javascriptthree.js

Issue with Node REST API: PUT request is failing to update data in the request

Encountering issues while attempting to update data through a PUT request. Despite making the request, the data remains unchanged and continues to display the previous information in Postman. Details of the PUT request sent via Postman: http://localhost: ...

javascriptnode.jsexpressmongoose

Another drop-down is hiding the bootstrap-select drop-down from view

What could be causing some parts of the first drop-down menu to be hidden by another drop-down menu below in the code snippet provided? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv= ...

javascripthtmltwitter-bootstraptwitter-bootstrap-3bootstrap-select

Positioning customized data on the doughnut chart within chart.js

Is there a way to customize the position of the data displayed in a doughnut chart? Currently, the default setting is that the first item in the data array is placed at 0 degrees. However, I need to place it at a custom position because I am working on a ...

javascriptangulartypescriptionic2chart.js

Prevent user input in calendar view using HTML classes

Need help adding a date picker to my code. Below is the snippet of code: The issue I am facing is that I want to prevent users from manually typing in dates. <div class="form-group clearfix"> <label class="col-lg-4 control-label">Date Sold ...

javascriptphpjquery

What is the best way to restrict user input to specific numbers only?

I have a text input field, how can I ensure that only numeric values from 1 to 31 are allowed? <input type="number" min="1" max="31"> ...

javascripthtmlcss

React doesn't trigger a rerender when the state of the useSelector is updated

I spent the entire day attempting to solve this problem to no avail. const tasks = useSelector((state)=>{ return state.taskReducer.tasks; }); React.useEffect(()=>{ //....some code },[tasks]) -------------- <div className='App&apo ...

reactjsreduxreact-redux

Having two owl carousels on one page is causing some issues

Struggling to implement two owl carousels on my page. Gif: View Gif Here The first carousel (shown at the top in the gif) is functioning perfectly. However, the second one (beneath the first in the gif) is not behaving as expected. Instead of displaying ...

htmlcssowl-carouselowl-carousel-2

Storing a date in MySQL using Vue.js and Node.js

My current tech stack consists of nodejs and express.js for the backend, vuejs for the frontend, and mysql as the database. I am facing an issue where I cannot send a date retrieved from localStorage to my mysql database. Whenever I try to send the date, ...

javascriptmysqlnode.jsvue.js

Is it possible to serve CSS using relative paths that go beyond the URL root?

I've encountered a file path issue with my HTML and CSS files. My HTML file is located in: src/test/html/index.html And the corresponding CSS file is in: src/test/css/index.css In the HTML file, the CSS is linked using: <link rel="stylesheet" ...

htmlcssbrowsercross-browser

Ways to make React detect a click event triggered by Jquery

I'm currently utilizing dabeng/OrgChart within a React application. The functionality I am looking to achieve is when a user clicks on a node, instead of Jquery populating an input box, I want React to save the selected node in state. I have attempte ...

javascriptjqueryreactjs

Guide to Including an Object in AngularJS Scope

I am completely new to Angular JS and mongod. My goal is to add a new ingredient field to this page for the specific drink that the + button is clicked on. Here is how my view looks like: UI Image This is what my .jade file contains: block content ...

javascriptangularjsnode.jsmongodb

The hover function stops working once the dropdown class has been removed

I am currently experimenting with a bootstrap template. In the navigation bar, there is an option for "Blog" and "Test". For the "Test" button, I decided to remove the li class="dropdown " because I wanted to create a button that changes color on hover si ...

htmlcss

CSS - Update BackgroundColor Depending on Child Element Color

Is there an official CSS way to change the background color based on the child element in HEX? For example: render() { return ( ... <span> <h3 style={{ color: item.color }}>Item Color</h3> </span> ...

cssreactjs

Create a new JavaScript object by parsing JSON data

I am looking to achieve the following: var my_data = { x : 'orange', y : 2 } function object(data){ this.x = 'banana'; this.y = 3; this.z = 'default value'; } once I have executed: var new_instance = ob ...

javascriptjson