Exploring ways to customize the input color of Material UI TextField when it is disabled [Version: 5.0.8]

I am having trouble changing the border color and text color when an input is disabled. I have tried multiple variations, as seen below:

const textFieldStyle = {
    '& label': {
        color: darkMode?'#1976d2':'',
    },

    '& .MuiOutlinedInput-root': {
        color:darkMode?'#1976d2':'',
        '& fieldset': {
          borderColor:darkMode?'#1976d2':'',
        },
        '&:hover fieldset': {
            borderColor: darkMode?'#1976d2':'',
        }, 
 
    },
    "& input.Mui-disabled": {
        color: "green"
      }

};


<TextField value={formState.vinInput} type="text" label="Stack" sx={textFieldStyle}/>

The rest of the styles are working correctly, like general color and focused color!

javascriptcssreactjsmaterial-ui

Answer №1

For version 4, you can implement the following code:

 MuiInputBase: {
    root: {
      "&$disabled": {
        color: "red",
        border: "1px solid red"
      }
    }
  }

According to the Material-ui documentation for version 5, the usage of the$ symbol in JSS will not function with Emotion. Valid class selectors need to be used as replacements.

This is the defined style:

    const useStyles = makeStyles({
    customDisable: {
      "& .MuiInputBase-input.Mui-disabled": {
        color: "red !important",
        "-webkit-text-fill-color": "red !important",
        borderColor: "red !important"
      },
      "& .Mui-disabled .MuiOutlinedInput-notchedOutline": {
        borderColor: "red !important"
      }
    }
  });

Apply it to a TextField like this:

<TextField
        disabled
        className={classes.customDisable}
        id="outlined-disabled"
        defaultValue="Hello World"
      />

Here is the Codesandbox link.

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 reason for recursion not producing a new object as output?

Trying to filter out nodes in a recursion function that iterates through a tree based on the registry property. function reduceNodesRegistry(source: any) { if (!source.registry) return source; return { ...source, children: s ...

javascripttypescript

Tips for including a new class in an HTML element

My goal is to add a specific class to an HTML tag, if that tag exists. This is the code I have attempted: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>index</title> <style> ...

javascriptjqueryhtmlcss

Utilizing Vue JS to showcase a pop-up block when hovering over a specific image

There are four images displayed, and when you hover over each one, different content appears. For example, hovering over the first image reveals a green block, while hovering over the second image reveals a blue block. However, the current logic in place i ...

javascriptvue.jsoptimizationvuejs2

How to supersede a random class in Material-UI with JSS

Trying to customize the style of a material textField by using a JSS selector that can target a dynamically generated classname. The custom style code snippet would be something like this: const styles = { '@media (min-width: 768px)': { ...

reactjsmaterial-uijss

Using a component as a route in Next.js: A step-by-step guide

I am interested in creating a feature that resembles the popups on Facebook, where dynamic content such as images and text are displayed. When clicking on an item, I would like a popup to appear with a URL structure similar to /post/343542. Currently, I h ...

reactjsreact-routernext.js

Steps for dynamically loading mui icons from mui with TypeScript

Is it possible to dynamically load MUI icons based on a string parameter using the following code snippet? import Icon from "@mui/icons-material" import SvgIcon from '@mui/material/SvgIcon'; const IconComponent = (props: typeof SvgIco ...

reactjsnext.jsmaterial-ui

Secure User Authentication using HTML and JavaScript Box

In the given code, I am attempting to implement a functionality where a message is displayed next to the select box if it does not have a value of male or female. This message should not be shown if one of these values is selected. However, this feature ...

javascripthtml

Utilizing offsets/push in the correct manner

I have been developing a Bootstrap website and I wanted to get some feedback on my current code structure. The design is coming along nicely, but I am unsure if this aligns with best practices? <div class="container-fluid"> <div class="row"> ...

htmlcsstwitter-bootstrap

Hover functionality in autocomplete feature malfunctioning

My Autocomplete component relies on the selected value of the parent Autocomplete, and it's been working perfectly. Typing or hovering to select both work as expected. const [hoverd, setHoverd] = useState(false); const onMouseOver = () => setHoverd ...

reactjsmaterial-ui

Allow the words to seamlessly transition back and forth between columns in a continuous cycle

Currently, I am attempting to showcase a large text in a format similar to a book. Each "page" has designated width and height, with content displayed over two columns: left and right. In this layout, page 1 is on the left, page 2 on the right, page 3 on t ...

javascriptjqueryhtmlcsswordpress

Using a global variable in Vue and noticing that it does not update computed variables?

Currently, I'm in the process of developing a web application and have begun implementing authentication using firebase. Successfully setting up the login interface, my next step is to propagate this data throughout the entire app. Not utilizing Vuex ...

javascriptfirebasevue.jsfirebase-authenticationvuetify.js

What causes the ongoing conflict between prototype and jquery?

I have researched how to effectively load both prototype and jQuery together, but the solutions I found did not resolve my issue. My current setup involves loading jQuery first, followed by this specific file: http:/music.glumbo.com/izzyFeedback.js, and t ...

javascriptjqueryprototypejsconflict

Is there an efficient method for transferring .env data to HTML without using templating when working with nodejs and expressjs?

How can I securely make an AJAX request in my html page to Node to retrieve process.env without using templating, considering the need for passwords and keys in the future? client-side // source.html $.get( "/env", function( data ) {console.log(data) ...

javascriptajaxnode.jsexpressenvironment-variables

After deploying my Next.js app to Vercel, I encountered a problem where the rss.xml file in the public folder was returning

I have successfully created an rss.xml file and wrote it using fs.writeFileSync. It works fine when viewed locally, but on vercel, the build fails with an error stating "no such file or directory ./public/rss.xml." If I comment out the fs.writeFileSync li ...

reactjsnext.jsrssvercelgetserversideprops

Unexpectedly, the Discord bot abruptly disconnects without any apparent cause

Hey there! I've encountered an issue with my Discord bot - it keeps disconnecting after a few hours without any apparent cause! This particular bot is designed to regularly ping the Apex Legends game servers to check their status and display the ser ...

javascriptnode.jsdiscord.js

Building paths through a jQuery loop

Transform String into Delimited Array, Generate Loop of Check Boxes, and Build New String Given String = "Folder Tier1\Folder Tier2\Folder Tier3\Folder Tier4\Folder Tier5\Folder Tier6\" (Missing) Use "\" as a delimi ...

javascriptjquery

Undefined scope

angular.module('CrudApp', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/', { templateUrl: 'assets/tpl/lists.html', controller: ListCtrl }). when('/add-user&apos ...

javascriptangularjsangularjs-scope

Please be patient for the PayPal script to load on the nextjs page

I've encountered an issue with my code that is meant to display PayPal buttons <Head> <script src="https://www.paypal.com/sdk/js?client-id=KEY"></script> </Head> The PayPal buttons are loaded within the ...

javascriptreactjspaypalnext.jsserver-side-rendering

What are some tips for utilizing the "bottom-row" slot within the "b-table" component in bootstrap-vue?

I am working on a component that utilizes the bootstrap-vue b-table component. My goal is to create a bottom row that displays the sum of each column in the table. However, I encountered an issue where the bottom-row only fills the first column, leaving ...

javascripttwitter-bootstrapvue.js

Failed validation for Angular file upload

I attempted to create a file validator in the front end using Angular. The validator is quite straightforward. I added a function onFileChange(event) to the file input form to extract properties from the uploaded file. I then implemented a filter - only al ...

javascripthtmlcssangulartypescript