Adjust the border hue of the MUI disabled outline input

I am currently struggling to locate the exact definition of this border color. After inspecting the dom, I cannot seem to find any border style within the input component or its pseudo elements...

My main goal is to slightly lighten the color of the input border to better match my theme's disabled color.

Below is the code I have utilized and the corresponding render:

 <OutlinedInput
      size='small'
      disabled={disabled}
      value={value}
      endAdornment={<InputAdornment position="end">{ctx.user.currency.short}</InputAdornment>}
      inputProps={{ style: { paddingBottom: 4, } }}
      style={{ fontWeight: 700, fontSize: 18 }}
      {...props}
    />

I attempted using <TextField /> as well, but encountered the same issue. Could you possibly assist me with this problem?

https://i.stack.imgur.com/zUr4z.png

javascriptcssreactjsmaterial-uidisabled-input

Answer №1

To achieve this customization, I utilized the theme palette feature in mui 5.5.0

import {createTheme} from "@mui/material"; 
const theme = createTheme({
    palette: {
        action: {
            disabled: 'your desired color code e.g #000000',
        }
    },
});

With this implementation, every disabled element across the application will display the color specified in the palette. However, if you wish to customize the disabled field for a specific input or override the palette setting, you can follow these steps:

<TextField
    value={value}
    variant="outlined"
    label="label"
    disabled
    sx={{
        "& .MuiInputBase-root.Mui-disabled": {
            "& > fieldset": {
                borderColor: "your desired color code e.g #8cffcb"
            }
        }
    }}
/>

Answer №2

Include this in your stylesheet:

.MuiOutlinedInput-notchedOutline {
  border-color: red !important;
  border-width: 4px !important;
}

Result when applied:

Answer №3

I needed to customize the border color for active and focused states while disabling hover on a disabled component. I tackled the issue with the following solution.

renderInput={(params) => (
            <TextField
              sx={{
                '& .MuiOutlinedInput-root': {
                  borderRadius: '7px',
                  height: 50,
                  border: '1px solid #909090',

                  ':hover': {
                    border: '0.5px solid #fd0000 !important',
                    boxShadow: '-1px 1px 4px 4px #FFEAEA'
                  },
                  ':focus-within': { border: '0.5px solid #fd0000 !important' }
                },
                '& .MuiOutlinedInput-root.Mui-disabled': {
                  ':hover': {
                    border: '1px solid #909090 !important',
                    boxShadow: 'none'
                  }
                },
                '& .MuiOutlinedInput-notchedOutline': {
                  border: 'none'
                }
              }}
              {...params}

Answer №4

I have a specific requirement where I want all TextInput elements to display with a green border color.

To achieve this, I made adjustments to my global styles:

const GlobalStyle = createGlobalStyle`
   
...SOME STYLES...
 
   * > & .Mui-focused {
        * > & .MuiOutlinedInput-notchedOutline {
                border-color: ${ColorsEnum.Green} !important;
        }
   }

`
export default GlobalStyle;

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

Is it feasible to utilize the translate function twice on a single element?

Using Javascript, I successfully translated a circle from the center of the canvas to the upper left. Now, my aim is to create a function that randomly selects coordinates within the canvas and translates the object accordingly. However, I'm encounter ...

javascripthtmlcsscss-transforms

Showing text instantly upon clicking a radio button, in real-time

I'm working with a set of radio buttons that are linked to numbers ranging from 1 to 24. I need to show the selected number in another part of the page when a radio button is clicked. What would be the best way to achieve this? ...

javascripthtml

Is there a way to adjust the layout of the dynamic card's columns?

Is there a way to display the card with 2 columns for the first card and then another 2 columns for the second card? Right now, it looks like this: https://i.stack.imgur.com/zu5PI.png However, I would like it to look more like this: https://i.stack.imgur ...

reactjsmaterial-ui

Ensuring that the div remains at the top of the page while scrolling

Although this question has been asked previously, I have searched extensively for something similar to this - Incredible Things You can find what I have at Below is the code snippet: <div id="myElement"> <div id="nav"> <a href= ...

jqueryhtmlcssscrollblogger

Utilize a class method within the .map function in ReactJS

In my ReactJS file below: import React, { Component } from "react"; import Topic from "./Topic"; import $ from "jquery"; import { library } from '@fortawesome/fontawesome-svg-core' import { FontAwesomeIcon } from '@fortawesome/react-fontaw ...

javascriptreactjsfrontend

Distributing actions within stores with namespaces (Vuex/Nuxt)

I'm encountering an issue with accessing actions in namespaced stores within a Nuxt SPA. For example, let's consider a store file named "example.js" located in the store directory: import Vuex from "vuex"; const createStore = ...

javascriptvue.jsnuxt.jsvuex

Issue encountered while trying to update field using dynamically created row

I am encountering a problem while trying to update the unit cost and total cost of dynamically generated rows in an inventory form that submits inventories to a database. The product names are fetched via autocomplete jQuery, as shown in the snapshots belo ...

javascriptjqueryautocomplete

Tips for separating the 'title' and 'icon' elements within Bootstrap panels?

I am currently working on integrating a FAQ section into my website (not yet live, so I cannot provide a link). However, I am facing some minor CSS issues that I am struggling to resolve. The problem lies in a panel that is meant to display as shown below: ...

htmlcssbootstrap-4accordionpanel

Can the function be executed without the need for ng-app?

After researching my AngularJS application, I discovered that having 2 ng-app tags in the html file means only the first one will be executed. In my code snippet below <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"> ...

javascriptangularjs

The Vue router is unable to access the store state

My Vue application is utilizing vue-router and vuex. I acquire an authentication token from my API, store it in localStorage, and then push it to the store. However, when the page refreshes, the app is unable to retrieve the token from localStorage and the ...

javascriptvue.jssingle-page-applicationvuexvue-router

How can I include an HTML tag within a select input value in a React.js project?

I am facing an issue while trying to map values from the input field of a select tag. It seems to be returning [Object object] for some reason. When I do not include another tag in the return statement of the map function, the output works fine. However, I ...

javascripthtmlreactjs

Receiving a response from an XMLHttpRequest() within a function

I've come across a situation where I have a function called isOnline(), and here's how it looks: function isOnline() { var request=new XMLHttpRequest(); request.onreadystatechange=function() { if(request.readyState==4) { ...

javascriptphpajaxxmlhttprequest

Struggling with a React Native build warning problem?

Upon executing react-native init reactApp, I encountered a warning stating that npm WARN <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ceef9fdffe8b1f2fde8f5eaf9dcacb2afa5b2ae">[email protected]</a> requires a pe ...

node.jsreactjsreact-native

Implementing a JavaScript Module Using JavaScript

I have encountered a simple problem. I am trying to use two JavaScript files: one following the module pattern and another one that calls the first one. I have tested all the code using Node.js and everything works fine when it is all in one file. However, ...

javascriptnode.jsmodule

Creating Dynamic Forms in React with Typescript: A Step-by-Step Guide to Adding Form Elements with an onClick Event Handler

I am looking to create a dynamic generation of TextFields and then store their values in an array within the state. Here are my imports: import TextField from '@material-ui/core/TextField'; import Button from '@material-ui/core/Button&apos ...

reactjstypescriptmaterial-ui

Two sections that are supposed to have the same height, but one seems to be slightly taller than the other

Upon closer inspection: At first glance, they may appear identical at certain zoom levels. However, a more detailed examination through zooming in and out reveals a noticeable discrepancy. Firefox's default zoom may make them seem incorrect, while Chr ...

csshtmllayoutheight

When trying to start a React project with npm, an error message is displayed stating "index.js file cannot be located."

I've been working on a React project using VSCode, but every time I try to run it in the browser, I keep encountering an error stating that it can't find the index.js file, even though it's located in the correct folder. (Yes, I made sure to ...

reactjsnpmnpm-start

Expanding and collapsing nested lists vertically with React

In my React.js component, I have a setup where I am displaying states and their respective districts. The list displays correctly as intended. However, my issue is that when I click on any state, only the sublist of that specific state should display, not ...

reactjs

The admin-ajax.php file in WordPress consistently fails to return any value other than

I developed a WordPress ajax plugin, but I am facing an issue where admin-ajax.php always returns 0 and the plugin doesn't work as expected. Here is the code I have implemented: add_action( 'wp_ajax_example_ajax_request', 'example_aja ...

javascriptphpjqueryajaxwordpress

Can the value of a variable be passed as seen in the JavaScript code snippet?

I'm wondering if I'm on the right track with generating random colors when a button is clicked. Here's my code: randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16); // --- more code --- changeHeaderColor() { con ...

javascriptreactjs