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

Discover the method to retrieve the chosen value from a list of radio buttons using AngularJS

After making an AJAX request and receiving JSON data, I have created a list of radio buttons with values from the response. Although I have successfully bound the values to the list, I am facing difficulty in retrieving the selected value. Below is a snipp ...

javascriptangularjs

What is the equivalent of defining conditional string types in Typescript similar to flow?

type UpsertMode = | 'add' | 'update' | 'delete'; interface IUpsertMembers { mode: UpsertMode; } const MagicButton = ({ mode: UpsertMode }) => { return ( <button>{UpsertMode}</button> ); } const Upse ...

javascriptreactjstypescript

What is the method for triggering two actions within a single linked tag?

I have a link tag structured like this: <a href="<?php echo base_url().'dashboard' ?>" class="check_session">Home</a> Upon clicking the "Home" link, it should navigate to the dashboard. At the dashboard page, I want to check i ...

javascriptjqueryhtmlcsscodeigniter

Discover how to utilize SX to access the theme colors in Material UI

What is the correct way to access the theme colors using the sx property? I attempted the following code but it was unsuccessful. <Card sx={{ border: "2px solid primary.main", }} > ...

reactjsmaterial-ui

Angular Translate Directive Unleashes the Power of XSS Vulnerabilities

For my project, I have chosen to utilize the 'escape' method as the sanitization strategy for handling potentially harmful content. This includes implementing the translate directive in certain areas, as well as utilizing the translate filter in ...

javascriptangularjsxssangular-translate

TRPC fails to respond to the passed configuration or variables (e.g., when enabled is set to false)

Recently started using trpc and I'm trying to grasp how to utilize useQuery (which I've previously worked with in react-query): const IndexPage = () => { const { isLoading, data, isIdle } = trpc.useQuery([ "subscriber.add", { email: ...

javascriptnode.jsnext.jsreact-querytrpc.io

After logging in, I am unable to redirect to another PHP page as the login form simply reloads on the same page

Lately, I've encountered an issue that has persisted for a few days. The login validation is functioning flawlessly. However, the problem arises when attempting to redirect to another page, specifically 'index.php', after logging in. Instead ...

javascriptphpjqueryhtmlajax

The GMaps API v3 is currently being loaded, but is not displaying on the webpage

Although the maps are supposed to be loading, I'm having trouble actually seeing them appear. Troubleshooting function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var mapOptions = { zoom: 4, center: myLat ...

htmlcssgoogle-mapsgoogle-maps-api-3

Set the timezone of a Javascript Date to be zero

Is there a way to create a Javascript date without any specific timezone? When I try to do so in Javascript, it automatically sets it to GMT Pacific standard time. let newDate = new Date(new Date().getFullYear(), 0, 2, 0, 0, 0, 0) }, newDate: Sat Feb 01 2 ...

javascripttypescript

convert JSON to Java object using GSON with a map

Here is the structure of my Java POJO: public class MyPersonTO{ String name; String surname; Map<String, Double> categories; } Currently, I am using the Gson library, but I'm uncertain about the formatting of my JSON string and the obje ...

javascriptjsongson

Circular CSS menu

What I'm Trying to Achieve: I am interested in developing a unique radial menu that includes interactive elements, such as the central image and the surrounding sections. It is imperative that the solution is compatible across all browsers. The examp ...

htmlcssnavigationcss-shapes

Verify all inputs are complete in the FullScreenForm

I have been working on implementing a form from this website: http://tympanus.net/Development/FullscreenForm/ My main objective is to validate each input when the form is submitted and display any errors that may arise. To achieve this, I have already se ...

javascriptjqueryajaxvalidation

How can a function work with an array of subarrays of objects without altering the original array?

Within a small coding project I recently completed, I handled an array consisting of 3 subarrays, with each subarray containing 4 objects. I passed this array through a function that gradually removes values from each subarray until only 1 object remains i ...

javascriptarrays

Click on a button to send the React Router path as a parameter in

I've got a React form with a submission button like this: <Link className="btn btn-secondary btn-width-200 search-submit" to={{pathname: '/booking/search', query: this.state.filters}}> Search </Link> Within the ...

javascripthtmlreactjsurl-routing

React Native Elements Overlay: Troubleshooting Webview Functionality

I've implemented react-native-element for the components in my app and I'm using Overlay to display modals. However, I encountered an issue with displaying a WebView within one of the modals. export const Modal = ({ visible, showCrossBtn, se ...

reactjsreact-nativereact-native-elements

What is the best way to wrap a div in a vertical orientation?

I'm looking to create a vertical div around an image that fluidly changes width: |_________________| | |XXXXXX| | | |XXXXXX| | | |XXXXXX| | | |XXXXXX| | | |XXXXXX| | | |XXXXXX| | |-----------------| The cont ...

htmlcss

Is it acceptable to utilize display:none in order to generate multiple CSS navigation bars for a responsive website?

I designed a CSS navbar that looks great on larger screens, but unfortunately it doesn't reflow well on mobile devices. One solution I thought of was to create a separate, mobile-friendly navbar and position it on top of the desktop version while hidi ...

htmlcssresponsive-design

Create a border surrounding the matColumn within a sticky matTable

I am currently working with a matTable that has the first two or three columns set as sticky. However, I am facing an issue where the scrolling behavior of the non-sticky columns under the sticky ones looks like a glitch due to existing border styling on t ...

csshtml-tablecss-selectorsstickysiblings

What is the best way to assign multiple values to an object's state using useReducer?

I'm having an issue using a function's results to update two values in the state of an object within the reducer. The error message says I am getting a value of undefined for result. const initialState = { charCountsFirstName: [7, 4, 2, 2, 2 ...

reactjsreact-hooks

Utilizing PHP and jQuery to dynamically populate Google Maps with multiple markers

I am currently working on integrating a Google map with a database to dynamically display multiple markers using PHP and MySQL. Below is the code I have been using: <?php //This section retrieves data from the database for later use in jQuery //CREATE ...

javascriptphpjquerygoogle-mapsgoogle-maps-api-3