Modify the placeholder color for a disabled Input element to match the overall Mui theme design

I am struggling to change the color of the placeholder text in a disabled input field within my app's theme. Despite attempting to target the MuiFormControl, MuiInputBase, and MuiInput components in my theme.tsx file on CodeSandbox, I have not been successful in altering the placeholder color. However, when I added a background color to test if I was targeting the correct elements, it worked as intended, suggesting that I am looking in the right place.

You can view my code on CodeSandbox here: https://codesandbox.io/s/placeholder-disabled-input-97gdl5?file=/src/theme.js

Interestingly, by directly modifying the CSS from the web console during execution, I can successfully change the color of the placeholder text (see screenshot 1 and 2).

placeholder unmodified despite custom theme

placeholder modified from web console

While I have no issues targeting the placeholder in an active state, I am unable to access it in a disabled state. How can I accomplish this?

javascripthtmlcssmaterial-uiplaceholder

Answer №1

To enhance your styling technique, it is advisable to refrain from using CSS selectors in the style overrides. Instead of relying on selectors like .MuiInput-input, it is more effective to utilize the classes prop that MUI offers for directly applying custom class names to your component.

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiInput: {
      styleOverrides: {
        root: {
          "& input::placeholder": {
            color: "grey",
          },
          "&.Mui-disabled input::placeholder": {
            WebkitTextFillColor: "grey",
          },
        },
      },
    },
  },
});

Answer №2

To resolve the issue, I specifically targeted the -webkit-text-fill-color property within the .Mui-disabled class inside the .MuiInput-input element. Below is my finalized MuiInput theme for the placeholder section:

const customizedTheme = createTheme({
    components: {
        MuiInput: {
            styleOverrides: {
                root: {
                    ".MuiInput-input": {
                        "&::placeholder": {
                            color: GREY,
                        },
                        
                        "&.Mui-disabled": {
                            "&::placeholder": {
                                "-webkit-text-fill-color": GREY,
                            },
                        },
                    },
                },
            },
        },
    },
});

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

Having trouble binding form data to a React component with the onChange() method?

I've been working on developing an email platform exclusively for myself and encountered a roadblock with this React form not updating state when data is entered. After identifying the issue, it appears that the main problem lies in the React form not ...

javascriptreactjsformsapijsx

Assign the "this" keyword of App.vue to the Vuex state

I have discovered a workaround for accessing vue-router and other services that only works within a Vue component. By saving the "this" of the Vue app in the state of Vuex within the created option of App.vue. Is this a good approach or could it potential ...

javascriptvue.jsvuex

A guide to customizing the appearance of Textfield labels in Material-UI using React

Can someone assist me with changing the label color in Material-UI from grey to black? I am new to Material-UI and struggling to figure it out. Below is the code snippet: import React from "react"; import ReactDOM from "react-dom"; import { TextField, Bu ...

javascripthtmlcssreactjsmaterial-ui

What is the best method for creating a loop script within a widget using script?

I am trying to implement a loop within a widget, however, the widget contains an internal script: <!DOCTYPE html> <html><head></head><body> <script> list=["AMAR3","BBDC4", "BEEF3", "BPAN4", "BRFS3", "B3SA3", "CVCB3" ...

javascripthtml

Use jQuery to parse the JSON below and then showcase the information in an HTML table

Can anyone assist me with parsing the following JSON using jQuery and presenting it in an HTML table? I want to showcase the values of "key" and "doc_count" in an HTML table. Your help would be greatly appreciated. Please find the JSON data below: { ...

javascriptjqueryhtmljson

Is it possible for web browsers to set a timeout on an XmlHttpRequest while it is still active?

When dealing with asynchronous XMLHttpRequests that take a long time to retrieve data from the server, I am searching for a way to abort them. Setting a timeout before sending the XHR is not feasible due to the length of these requests. Although calling X ...

javascriptajaxxmlhttprequesttimeoutabort

Failure of Angular to execute HTTP calls asynchronously

I am feeling a bit perplexed about how and when to use the .then and/or .success functions. Here is a function example: $scope.handleData = function(option){ if(option == 1){ link = firstLink/; }else{ link = secondLink/; } ...

javascriptangularjs

Resizing SVG to specify width in pixels and automatically adjust height

I'm having trouble understanding how SVG works. Can someone explain where my mistake is? Here's an example of my inline SVG code: <div style="width:1000px; height:auto; background-color:blue;"> <svg class="_image"><use xlink ...

htmlcsssvggraphics

Dividing a pair of CSS stylesheets on a single HTML page

Currently, I am working on a HTML page that includes multiple javascripts and css files in the header section. <link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet" type="text/css" /> In order to make the website mobile-friendly, I s ...

javascriptjqueryhtmlcss

Improving the efficiency of rendering multiple objects on a canvas

I'm currently working on developing a simulation for ants using the basic Javascript canvas renderer. Here is a snippet of the rendering code: render(simulation) { let ctx = this.ctx; // Clearing previous frame ctx.clearRect(0, ...

javascripthtmlcanvasrenderingpixi.js

Printing specific div content from an HTML page using a print button

I have a situation where I need to control the printing functionality of my HTML page. Currently, I have two div tags in my code with a single print button at the top of the page. When I click on this button, it prints the content from both divs. However ...

htmlcss

Leverage HTML within JSON for a multilingual website using i18next with Next.js

I am working on a multi-language website using Next.js. To handle the translations, I am using the package i18next. In my JSX code, I define variables like this: {t("satisfied:title")} This means {t("JSONfileName:JSONvariable")} However, when I try to i ...

htmlreactjsjsonnext.js

Troubleshooting the Gutter Problem in jQuery Isotope and Masonry

Currently, I am utilizing the Isotope jQuery plugin. While it is a fantastic tool, I am encountering a minor issue with aligning items in masonry mode. The width of my container is 960px, and I aim to have 4 items perfectly aligned as if they were adhering ...

javascriptjquerycssjquery-masonry

Troubleshooting: The issue with applying 'style' in react-draft-wysiwyg

Is there a way to style my textboxes within a rectangle with a default height? I attempted to use the style attribute in my <Editor /> but it didn't work. import { Editor } from "react-draft-wysiwyg"; import { EditorState } from " ...

javascriptreactjsreact-hooksreact-draft-wysiwyg

CSS - ensure that two elements with display: table-row stay stacked on top of one another

I came across this HTML structure .table { display: table; } .row { display: table-row; } .cell { display: table-cell; text-align: center; padding: 5px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } .sticky { positi ...

htmlcsssticky

The ngOnInit function is not triggered upon instantiation of an Injectable class

What could be causing the ngOnInit() method not to be called upon resolution of an Injectable class? Code import {Injectable, OnInit} from 'angular2/core'; import { RestApiService, RestRequest } from './rest-api.service'; @Injectable ...

javascriptangulartypescript

Stopping errors are a common occurrence in synchronous AJAX

I recently encountered an issue with my AJAX request setup. In the success callback function, I called a new function to render Google links and made another AJAX call. To address some performance concerns, I attempted to change these asynchronous calls t ...

javascriptjqueryajax

Harnessing the power of JavaScript functions to display an image when clicked

Looking for help with making an image appear when clicking on one of three images? Despite trying different approaches, the desired result is still not achieved. I'm aware of using if else statements but exploring other methods. Any insights on what m ...

javascripthtmlcssonclick

Firing a custom jQuery event when a page loaded via AJAX is complete, ensuring it is triggered

I am facing an issue with a particular scenario. There is a page that contains a script to load a child page and log a custom event, which is triggered in a Subform. --Index.html-- <body> <input type="button" class="clickable" value="Load child ...

javascriptjquerytriggerscustom-event

When making an Ajax post request, the loading indicator may not appear

I've implemented the jQuery code below for an autocomplete input field, but I'd like to have a spinner display while waiting for the response from the server. In my code, I'm using search: to show the loading div and open: to hide it. The s ...

javascriptjqueryajaxautocomplete