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

Implementing a dynamic function with jQuery Tokenize's change event

I'm currently facing an issue with triggering the on change event on the select box from jQuery Tokenize. Below is the code snippet I am working with: <select id="tokenize" multiple="multiple" class="tokenize-sample"> <option value="1"&g ...

javascriptjquery

What strategies can I employ to create test cases for the untested code within useEffect and dispatch functions?

Just beginning my journey in writing tests, so this is all new to me. Executing the command below: $ yarn test:coverage This is the output I get: https://i.stack.imgur.com/cqAwo.png I need to retrieve a list of Models through dispatch when the dropdo ...

reactjsjestjsmaterial-uireact-testing-library

Are DIV elements really impossible to click using selenium Web Driver?

Can DIV elements be clicked using selenium Web Driver? For example, I'm having trouble clicking the delete button in Gmail. https://i.stack.imgur.com/zsyio.png I've been trying to locate the element using the XPATH = //div[@aria-label='De ...

htmlcssseleniumxpathselenium-webdriver

Generating instances using TypeScript generics

Looking to create a factory for instantiating classes with generics. After checking out the TypeScript docs, everything seems to work as expected. Here's a simplified version of how it can be done: class Person { firstName = 'John'; ...

javascriptnode.jstypescriptgenericstypescript-generics

Determine the class name of an element when it is clicked on

For various reasons, I am unable to use $('.class').click or on('click', function..) Therefore, I must utilize the onclick="" event from the html element. Is there a way to determine the class of the element where the onclick event oc ...

javascriptjqueryonclick

Harvesting information from an HTML table

I have a table displaying the following values: turn-right Go straight turn-left How can I extract only the 2nd value, "Go straight"? Here is the code snippet I tried: var text = $('#personDataTable tr:first td:first').text(); The code above ...

javascriptjqueryhtml

Asynchronous functions within the next context

Hello there! I am trying to send the client's IP address from the frontend in a Next.js application to the backend. To retrieve the IP, I am using the following function: async function getIP() { var clientIP = await publicIp.v4(); ...

javascriptasynchronousaxiosnext.js

Interact with one div to trigger changes in another (CSS)

I successfully influenced the style of one div when hovering over another div using the "+" selector, but I would prefer to find a different solution. My goal is for this interaction to work even if the .h div and the .t div are located in separate parent ...

htmlcsshoverselector

Snackbar overlapping in Material UI

I am encountering an issue with the Material UI Snackbar. Despite my familiarity with Material UI, I am struggling to resolve a problem where the snackbar is overlapping when it appears at the top of the screen. Various attempts to fix it have been unsucce ...

reactjsmaterial-ui

Is it possible to utilize JStestDriver for testing JavaScript code embedded within JSP files?

Just a quick question: Is it feasible to conduct unit testing, specifically with JStestDriver, on Javascript code that is embedded within JSP files? Or do I need to extract it into separate external javascript files? ...

javascriptjspunit-testingjs-test-driverdata-integration

Are you experiencing problems with JSON formatting?

Currently, I am facing an issue with populating an HTML table using JSON data. The problem arises when I try to populate the table with the JSON data that was provided to me. After careful examination, I suspect that the issue might lie in the formatting o ...

javascriptjqueryjson

Is there a potential impact on performance when utilizing local variables instead of repeatedly accessing properties?

Examining JavaScript code optimized for a performance-sensitive environment, specifically a game engine in mobile settings. Oftentimes, this code avoids using local variables and instead relies on explicit chains, such as: if (this.x.y[z].i) { this.x ...

javascriptperformancepropertieslocal-variables

Switch between MMM dd yyy and dd/mm/yyyy date formats easily

I have implemented a native material-ui date picker which currently displays dates in the dd/mm/yyy format. However, I need to customize the display format to show dates like this: Jun 18 2012 12:00AM. This specific date format is essential for consistency ...

javascriptreactjsdatetimematerial-ui

Changing all object values to true with React useState

In a certain file, I have defined an object with the following structure: export const items = { first: false, second: false, third: false } Within a component, I am using this object as shown below: import { items } from 'file'; const [el ...

javascriptreactjsreact-hooksuse-state

Why is it that a JSX element can take a method with parentheses or without as its child?

Why is it that when I attempt to pass a method without parentheses into a React component as a child of one of the JSX elements, an error appears in the console? However, simply adding parentheses resolves the issue. What's the deal? For example: ran ...

javascriptreactjsjsx

Cross-origin resource sharing problem arises when JavaScript is loaded asynchronously using script tags created dynamically

By dynamically creating a script as shown below, the JavaScript source is downloaded asynchronously. let newScript = document.createElement('script'); newScript.src = srcUrl; let firstScript = document.getElementsByTagName('script')[0] ...

javascripthtmlajaxxmlhttprequestcors

What causes the height and width properties in a div to remain unchanged even after using the zoom/scale CSS?

I'm trying to center a CSS spinner on the page, but I am struggling with making it happen. Even when scaled down by 50%, the height and width remain at 200px. <div class="center" style=""> <div class="uil-default-css" style="width: 200px ...

htmlcss

Using CSS, create a layout with a small 2x2 box positioned beside a larger 2x2 box

Can a flexible ul li structure be achieved with flexbox? I attempted to set the width of the squares to 25% and make the 1st, 3rd, or 5th one 50% wide using a combination of float:left, clear[left|right], but the last square ends up dropping to a single ro ...

htmlcss

Dynamic Binding of ng-model to DOM Element in AngularJS

I am facing a challenge with my web page where I need to dynamically attach ng-model attributes to some HTML elements that I don't have the ability to edit. What I want to achieve is to have AngularJS re-bind these attributes to the scope. You can fin ...

javascriptangularjsbinding

Adding several lines of HTML content from an object using jQuery's append method

Currently, this is what I have: $(document).ready(function() { $.ajax({ type:"GET" , url:'{{url("/api/getcart")}}' , dataType:"json", success: function(data){ $('#price').append(data.cartitems[1].product.pr ...

javascriptjqueryhtmlajax